黑马程序员技术交流社区

标题: 【成都校区】js史上最精简!防抖节流 [打印本页]

作者: 小蜀哥哥    时间: 2019-10-17 17:29
标题: 【成都校区】js史上最精简!防抖节流
本帖最后由 小蜀哥哥 于 2019-10-17 17:30 编辑

前言
作为前端开发人员,相信大家对防抖和截流早已是十分熟悉了,初次听说这个玩意儿的时候我的第一反应是
防抖,防止抖动?节流,节约流水??
于是乎百度了一波,终于弄懂。   就是,为了防止事件在短时间内被多次触发的两种解决方案。网上巴拉巴拉一堆说法,   总结:
   防抖:你狂点按钮也没有,等你冷静下来事件才会触发。
   节流:游戏里面的技能冷却功能。
好的,然后呢??
然后呢?当然是百度一下ctrl+c,ctrl+v完成功能点啊,自己写??不存在的
于是乎我找了一大堆案例总结几个例子大概是:
防抖:
[JavaScript] 纯文本查看 复制代码
//例子1
function debounce(fn,delay=200){
        let timer = null;
        return function(){
                if(timer) clearTimeout(timer);
                timer = setTimeout(()=>{
                        fn.apply(this,arguments);
                        timer = null;
                },delay);
        }
}
//例子2
function debounce(func, wait) {
    let timeout;
    return function () {
        let context = this;
        let args = arguments;
        if (timeout) clearTimeout(timeout);
            timeout = setTimeout(() => {
            func.apply(context, args)
            }, wait);
        }
}

节流:
[JavaScript] 纯文本查看 复制代码
//时间戳版
function throttle(func, wait) {
    let previous = 0;
    return function() {
        let now = Date.now();
        let context = this;
        let args = arguments;
        if (now - previous > wait) {
            func.apply(context, args);
            previous = now;
        }
    }
}
throttle(count,1000);
//定时器版
function throttle(func, wait) {
    let timeout;
    return function() {
        let context = this;
        let args = arguments;
        if (!timeout) {
            timeout = setTimeout(() => {
                timeout = null;
                func.apply(context, args)
            }, wait)
        }
    }
}








欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2