函数防抖
频繁触发，只在特定的时间内执行一次代码。
应用场景：onrize,onscroll等频繁触发的函数，比如你想获取滚动条的位置，然后执行下一步动作
//函数防抖
function debounce(fn,delay){
let timer = null;
return function (){
let args = arguments;
if(timer) clearTimeout(timer);
timer = setTimeout(()=>{
fn.apply(this,args)
},delay)
}
}
函数节流
频繁触发，但只在特定的时间内没有再次触发执行函数，函数才会真的去执行。
应用场景：输入框自动补全时间，频繁操作点赞取消点赞等。
function throttle(fn,delay){
let timer = null;
return function(){
let args = arguments;
if(timer) return;
timer = setTimeout(()=>{
fn.apply(this,args)
timer = null;
},delay)
}
}
事例
<body>
<button id="btn1">普通点击</button>
<button id="btn2">防抖点击</button>
<button id="btn3">节流点击</button>
</body>
//普通点击
let btn1 = 0;
document.getElementById('btn1').onclick = function() {
console.log(btn1++)//点击多少次，打印多少次
}
//防抖点击
let btn2 = 0;
function fnBtn2(b) {
btn2++;
console.log(btn2,b)
}
let b2 = debounce(fnBtn2, 3000);//函数初始化
document.getElementById('btn2').onclick = function() {
b2('b2')//3s之内停止点击才会执行
}
//节流点击
let btn3 = 0;
function fnBtn3(b) {
btn3++;
console.log(btn3,b)
}
let b3 = throttle(fnBtn3, 3000);//函数初始化
document.getElementById('btn3').onclick = function() {
b3('b3')//无论点击多少次，只会每3s执行一次
}