前言

---

作为前端开发人员，相信大家对防抖和截流早已是十分熟悉了，初次听说这个玩意儿的时候我的第一反应是

防抖，防止抖动？节流，节约流水？？
于是乎百度了一波，终于弄懂。   就是，为了防止事件在短时间内被多次触发的两种解决方案。网上巴拉巴拉一堆说法，   总结：
   防抖：你狂点按钮也没有，等你冷静下来事件才会触发。
   节流：游戏里面的技能冷却功能。
好的，然后呢？？

然后呢？当然是百度一下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)
        }
    }
}

前言

---

作为前端开发人员，相信大家对防抖和截流早已是十分熟悉了，初次听说这个玩意儿的时候我的第一反应是

防抖，防止抖动？节流，节约流水？？
于是乎百度了一波，终于弄懂。   就是，为了防止事件在短时间内被多次触发的两种解决方案。网上巴拉巴拉一堆说法，   总结：
   防抖：你狂点按钮也没有，等你冷静下来事件才会触发。
   节流：游戏里面的技能冷却功能。
好的，然后呢？？

然后呢？当然是百度一下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)
        }
    }
}