一、函数防抖
前端开发工作中，我们经常在一个事件发生后执行某个操作，比如鼠标移动时打印一些东西：
window.addEventListener("mousemove", ()=>console.log(123));
//测试发现鼠标移动了1毫米，回调函数执行了将近10次，这种做法是非常耗费资源的。这就像电梯，如果一个电梯的设计是每进去一个人就立即关门，那么如果有10个人排队进会是怎么样呢？多耗电而且很危险。
解决方法就是每进一个人都重新倒计时N秒再关门，这样只要每个人都在前一个人进去N秒之内进门，那么每进一个人，电梯都会重新计时N秒，所以它只会在最后一个人进门N秒之后再启动关门程序。
这里有三个关键点：「事件是高频率发生的」、「在前一个发生后N秒内发生下一个」、「重新倒计时」。
函数防抖（debounce）就是以上解决方案的JavaScript实现，上面代码的改写思路是：每次事件发生后都只做两件事——「清除旧的计时器」、「设置新的计时器」
//重置计时器的函数
function debounce(func, ms){
let timer = null;
function reTimer(){
//重新计时
clearTimeout(timer)
timer = setTimeout(func, ms)
}
return reTimer;
}
//要执行的动作
function handle(){
console.log("--- do something ---")
}
//绑定事件：每次鼠标移动时，就会执行debounce返回的reTimer函数
window.addEventListener("mousemove", debounce(handle, 1000))
进一步分析
前面说了，每次事件发生后都只做两件事——「清除旧的计时器」、「设置新的计时器」，那么为什么要在addEventListener里执行debounce函数呢？
因为reTimer函数需要操作来自父级作用域的变量timer，而debounce函数就是为了创建这样一个作用域，使得每次执行reTimer函数时timer变量都是存在的。
如果要求不使用debounce函数，我们就得把timer变量定义在addEventListener之前：
//重置倒计时
function reTimer(){
if(timer){
clearTimeout(timer)
}
timer = setTimeout(handle, 1000)
}
//事件处理
function handle(){
console.log("--- do something ---")
}
//事件绑定
let timer = null; //或者 window.timer = null
window.addEventListener("mousemove", reTimer)
不过，相比使用debounce函数，这样做就不那么优雅了。
addEventListener的目的是操作timer变量，而timer在debounce的作用域内，addEventListener访问不到，所以用debounce返回的reTimer去访问，这就是闭包了。
防抖是让重复事件的处理函数只在最后一次发生时执行，而闭包只是一个更好的实现方案。
二、函数节流
理解了函数防抖，函数节流也就好办了，我们只需要理解场景和方案。
假如我们正在做一个输入框，要求每输入一个字符都调用一个API来查询数据，从而实现联想、自动补全等功能，然而我们的输入速度是很快的，可能还没等第一个字符的查询结果出来，第二个字符就已经敲进去了，所以我们需要让查询频率小一点，具体做法就是在输入的过程中，每隔N秒才查询一次。
这里的关键点是：「事件是高频率发生的」、「在前一个发生后N秒内发生下一个」、「一个计时结束后再重新计时」
定时器实现节流
节流函数（throttle）要做的就是：「确保一个计时器停止时再重新计时」
/*
* 节流函数生成器
* 传递事件处理函数和延迟时间
* 返回节流函数
*/
function throttleGen(fn, delay) {
let timer = null;
function throller() {
if (timer === null) {
timer = setTimeout(function () {
fn();
timer = null;
}, delay)
}
}
return throller;
}
//事件处理函数
function handle() {
console.log('-- do something --');
}
//绑定事件
window.addEventListener("mousemove", throttleGen(handle, 1000))
三、防抖和节流的对比
用输入时执行动作的例子可以对比防抖和节流，防抖就是等最后一个字符输入完N秒之后再查询，而节流是在输入过程中每隔N秒查询一次。
以上代码为了保持简单，刻意忽略了绑定上下文等操作，在实际编码过程中，只要稍加改动即可使用稳定可靠的防抖和节流函数，比如这样：
function debounce(fn, delay) {
let timer = null;
return function () {
var _this = this; //这里改了
clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(_this); //这里改了
}, delay);
};
}