一、防抖的概念:
防抖是指当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定时间到来之前,有触发了事件,就重新开始延时。也就是说当一个用户一直触发这个函数,且每次触发这个函数,且每次触发函数的间隔小于既定时间,那么防抖的情况下只会执行一次。
通俗理解就是:防止用户频繁触发一个事件,只执行该事件的最后一次。
// 防抖
function debounce (timeout, time) {
let timer = null
return function () {
let _arg = arguments
clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(this, _arg)
}, time)
}
}
二、节流的概念:
节流是指动作绑定事件后,动作触发事件,在这段时间内,如果动作又发生,则无视该动作,直到事件执行完后,才能重新触发。
//节流
function throtte(func, time) {
let activeTime = 0;
return function () {
const current = Date.now();
if (current - activeTime > time) {
func.apply(this, arguments);
activeTime = Date.now();
}
};
}