共计 1563 个字符，预计需要花费 4 分钟才能阅读完成。
防抖（debounce）
用户与网页进行交互时，经常出现根据页面的状态、数据向服务器请求、发送数据的场景，比如：根据用户的输入数据进行实时校验，下拉请求数据等等，如果用户操作过于频繁，页面状态、数据变化的太快太频繁，会进行多次请求，这其中的很多请求都是没有意义的，实时校验，只需要校验用户最后的输入，下拉请求只需要在用户下拉的最后一次进行请求。这就需要防抖来实现了。防抖的原理：为事件触发时调用的函数添加延迟，如果在延迟内频繁触发，上一次的事件触发会被取消，延迟将会重新计算，这样一来用户的最会一次触发，函数才会真正被调用。
//fn 为回调函数，delay 是人为设置的延迟
function debounce(fn, delay){
var timeout; // 定时器编号
return function(){
//context 是回调函数运行的环境，
//args 是回调函数的参数，一般是 addEventListener 传进来的 event 变量
var context = this, args = arguments;
clearTimeout(timeout);// 当用户频繁触发事件时，定时器被清除
timeout = setTimeout(function(){
fn.apply(context, args);
}, delay);
}
}
// 调用方式
var validate = debounce(function(){
//do somthing
}, 200);
document.querySelector(‘input’).addEventListener(‘input’, validate);
节流（throttle）
节流，顾名思义就是把管道的阀门稍稍关紧一点，让水流动的少一点。在 javascript 中，很多事件是连续触发的，比如：resize，mousemove。我们不希望事件频繁触发，如果采用防抖方案，事件只在延迟时间内触发最后一次，这显然是不合理的，我们只需要让其触发的频率低一些，这就需要节流来实现。节流原理：为事件触发时调用的函数添加时间阈值，只有在超过时间阈值时触发事件，回调函数才会被调用。
//fn 为回调函数，threshhold 是时间阈值
function throttle(fn, threshhold){
var start = new Date(), timeout;
var threshhold = threshhold || 160;
return function(){
//context 是回调函数运行的环境，
//args 是回调函数的参数，一般是 addEventListener 传进来的 event 变量
var context = this, args = arguments, cur = new Date();
clearTimeout(timeout);
// 通过连续两次触发的时间间隔，决定是否调用回调函数
if(cur – start >= threshhold){
fn.apply(context, args);
start = cur;
}else{
// 当连续触发行为结束时，还要进行最后一次函数回调
timeout = setTimeout(function(){
fn.apply(context, args)
}, threshhold);
}
}
}
// 调用函数
var mousemove = throttle(function(e) {
//do somthing
});
// 绑定监听
document.querySelector(“#panel”).addEventListener(‘mousemove’, mousemove);
以下是 html 页面
<div id=’panel’ style=”background:blue;width:100vw;height:100vh”>
</div>
最后，大家可以通过这个动画来理解，学习防抖和节流。
