这是我参与「第五届青训营 」伴读笔记创作活动的第7天。
节流和防抖的目的：
都是为了限制函数的执行频次，以优化函数触发频率过高导致响应速度跟不上触发频率，防止在短时间内频繁触发同一事件而出现延迟，假死或者卡顿的现象。
节流和防抖的区别：
节流：目前有一事件A设置了定时器，那么在delay之前触发，都只会触发一次。
防抖：如果在delay之前重新触发，那么定时器会不断重新计时，最终会在最后一次完后才执行，对于需要实时响应的，应该用节流。防抖也就是等用户高频事件做完了，再进行事件操作。
节流和防抖的相同点：
防抖和节流都是为了阻止操作高频触发，从而浪费性能。
如何实现防抖？
如何实现节流？
3：例子
// 节流`
function throttle(fun,delay){
let flag = true;
return function(){
if(!flag){
return;
}
flag = false;
setTimeout(()=>{
fun.apply(this,arguments);
flag = true;
},delay)
}
}
function output(){
console.log('节流',Math.random());
}
// 防抖
function antiShake(fun,delay){
let timeout = null;
return function(e){
clearTimeout(timeout);
timeout = setTimeout(()=>{
fun.apply(this,argument);
},delay)
}
}
function play(){
console.log('防抖');
}
应用场景：
防抖：
-
search搜索联想，用户在不断输入值时，用防抖来节约请求资源
-
window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
节流：
-
鼠标不断点击触发，mousedown(单位时间内只触发一次)
-
监听滚动事件，比如是否滑到底部自动加载更多
