一、防抖（debounce）
1、防抖概念
防抖就是在规定时间内多次触发一个事件，只会执行一次，防止性能浪费和多次触发引起的后端数据异常。
2、应用场景
登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖； 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖； 文本编辑器实时保存，当无任何更改操作一秒后进行保存；
当我们在百度搜索时，下方会自动给出相关提示。如果每次用户输入变化都立即查询，那么会造成性能浪费，比如用户想搜索nihao，当用户在输入n的时候，就会触发查询，然后每次改变都会查询一次，给用户的体验也并不好。这个地方就可以使用防抖，当距离用户输入的时间间隔超过某一个时间时，才开始搜索，这个时间大概100ms应该就可以。
3、如何防抖
/*
* fn [function] 需要防抖的函数
* delay [number] 毫秒，防抖期限值
*/
function debounce(fn, delay) {
// 维护一个 timer，用来记录当前执行函数状态
let timer = null;
return function() {
// 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量
let context = this;
let args = arguments;
// 清理掉正在执行的函数，并重新执行
clearTimeout(timer);
timer = setTimeout(function() {
fn.apply(context, args);
}, delay);
}
}
// 直接调用即可 比如我们调用search方法
debounce(search, 200)
二、节流（throttle）
1、节流概念
节流函数不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。
2、节流场景
节流也适应防抖场景中的搜索提示问题；
scroll 事件，每隔一秒计算一次位置信息等；
浏览器播放事件，每个一秒计算一次进度信息等。
3、如何节流
// 时间戳执行
function throttle(fun, delay){
let startTime = Date.now();
return function(){
const that = this;
const args = arguments;
const nowTime = Date.now();
if(nowTime - startTime >= delay){
func.apply(that, args);
startTime = Date.now();
}
}
}
// 定时器执行
fucntion throttle(func, delay){
let timer = null;
return funtion(){
let context = this;
let args = arguments;
if(!timer){
timer = setTimeout(function(){
func.apply(context, args);
timer = null;
}, delay);
}
}
}
三、总结：
防抖和节流都是对性能的优化，既是对用户端的性能优化，避免对用户设备不必要的资源占用，提高流畅度，也是对服务器性能的优化，避免不必要的请求占用资源。
个人博客：www.51bishe.site
