1、函数防抖(debounce)
原理:每次触发事件时设置一个延迟调用方法,每次触发都会先清空上一次的延时器,然后重新调用方法
缺点:如果事件在规定的时间间隔内被不断的触发,则调用方法会被不断的延迟
function debounce(fn, wait) {
var timeout = null;
return function() {
if(timeout !== null) clearTimeout(timeout);
timeout = setTimeout(fn, wait);
}
}
2、函数节流(throttle)
原理:每次触发事件时,借助第三方变量,判断如果当前有等待执行的延时函数,则直接return
if (!flag) return;
// 立即设置为false
flag= false;
// 将外部传入的函数的执行放在setTimeout中
setTimeout(() => {
// 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。
// 当定时器没有执行的时候标记永远是false,在开头被return掉
fn();
flag= true;
}, delay);