大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46，售后保障稳定

什么是防抖

当事件被触发后，延迟几秒后再执行回调，如果在这几秒内事件又被触发，则重新计时。如：游戏中的回城机制，中途打断后必须要重新回城，重新读条。

应用场景

用户在输入框中连续输入一串字符时，可以通过防抖策略，只有在输入完后，才执行查询的请求，这样可以有效减少次数，节约请求资源。
例如：实现输入框的防抖

//模拟ajax请求
function ajax(content) { 
   
  console.log('ajax request ' + content);
}

let inputa = document.getElementById('unDebounce');

inputa.addEventListener('keyup', function (e) { 
   
    ajax(e.target.value);
})

Jetbrains全家桶1年46，售后保障稳定

只要按下键盘，就会触发ajax请求。从资源上来说是很浪费的行为，实际应用中，用户是输出完整的字符后才会请求。可以进行优化：

function ajax(content) { 
   
  console.log('ajax request ' + content);
}

function debounce(fun, delay) { 
   
    return function (args) { 
   
        let that = this;
        let _args = args;
        clearTimeout(fun.id);
        fun.id = setTimeout(function () { 
   
            fun.call(that, _args);
        }, delay)
    }
}
    
let inputb = document.getElementById('debounce')

let debounceAjax = debounce(ajax, 500)

inputb.addEventListener('keyup', function (e) { 
   
        debounceAjax(e.target.value)
    })

加入了防抖后，在频繁的输入时不会发送请求，只有当在指定间隔内没有输入时，才会执行函数。如果停止输入但是在指定间隔内又输入，会重新触发计时。

防抖代码

let timer; // 维护同一个timer
function debounce(fn, delay) { 
   
    clearTimeout(timer);
    timer = setTimeout(function(){ 
   
        fn();
    }, delay);
}
// 用onmousemove测试一下防抖函数:
function testDebounce() { 
   
    console.log('test');
}
document.onmousemove = () => { 
   
    debounce(testDebounce, 1000);
}
----------------------------------------------
简化后代码：
function debounce(fn, delay) { 
   
    let timer; // 维护一个 timer
    return function () { 
   
        // let _this = this; // 取debounce执行作用域的this
        let args = arguments;
        if (timer) { 
   
            clearTimeout(timer);
        }
        // timer = setTimeout(function () { 
   
        // fn.apply(_this, args); // 用apply指向调用debounce的对象，相当于_this.fn(args);
        // }, delay);
        timer = setTimeout(()=> { 
   
            fn.apply(this, args); // 用apply指向调用debounce的对象，相当于this.fn(args);
        }, delay);
    };
}


// test
function testDebounce(e, content) { 
   
    console.log(e, content);
}
var testDebounceFn = debounce(testDebounce, 1000); // 防抖函数
document.onmousemove = function (e) { 
   
    testDebounceFn(e, 'debounce'); // 给防抖函数传参
}

什么是节流

即每隔一段时间，只执行一次函数。如游戏中的点击鼠标发射子弹，连续不断点按鼠标，并不会发射更多的子弹，而是按照一定的数量连续发射。

应用场景

1 滚动加载，加载更多或滚到底部监听
2 谷歌搜索框，搜索联想功能
3 高频点击提交，表单重复提交

函数防抖与节流的比较

都可以通过使用 setTimeout 实现。目的都是降低回调执行频率，节省计算资源。

节流代码

function throttle(fn, delay) { 
   
    let timer;
    return function () { 
   
        let _this = this;
        let args = arguments;
        if (timer) { 
   
            return;
        }
        timer = setTimeout(function () { 
   
            fn.apply(_this, args);
            timer = null; // 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器
        }, delay)
    }
}


//test
function testThrottle(e, content) { 
   
    console.log(e, content);
}
let testThrottleFn = throttle(testThrottle, 1000); // 节流函数
document.onmousemove = function (e) { 
   
    testThrottleFn(e, 'throttle'); // 给节流函数传参
}

/** * 触发完事件 n 秒内不再触发事件，n秒后再执行 * 只执行最后一次点击 * @param event * @param time * @param flag 是否立即执行 * @returns {Function} * @constructor */
export function debounce(event, time, flag) { 
   
  const interval = time || 500
  let timer = null
  // 默认立即执行
  const f = flag || true
  return function(...args) { 
   
    clearTimeout(timer)
    if (f && !timer) { 
   
      event.apply(this, args)
    }
    timer = setTimeout(() => { 
   
      event.apply(this, args)
    }, interval)
  }
}

/** * 只在单位时间内执行一次 * 第一次事件不会触发，最后一次一定触发 * @param event * @param time * @returns {Function} * @constructor */
export function throttle(event, time) { 
   
  const interval = time || 500
  let timer = null
  return function(...args) { 
   
    if (!timer) { 
   
      timer = setTimeout(() => { 
   
        timer = null
        event.apply(this, args)
      }, interval)
    }
  }
}