函数防抖:
函数防抖:是指连续触发事件,当一段时间后不在触发事件后,事件处理函数才会执行一次。如果在设定的时间没到之前,是不会重复执行事件的处理函数。
function debounce(func,wait = 0){
if(typeOf func != 'function'){
throw new TypeError('这不是个方法')
}
let times = null,result;
return function(){
let that = this,arge = arguments;
if(times){
clearTimeout(timeid);
}
times = setTimeout(() =>{
result = func.apply(that,arge);
},wait)
return result
}
}
// 处理函数
function handle() {
console.log(Math.random());
}
// 滚动事件
window.addEventListener('scroll', debounce(handle, 1000));
当持续触发scroll事件时,事件处理函数handle只在停止滚动1000毫秒之后才会调用一次,也就是说在持续触发scroll事件的过程中,事件处理函数handle一直没有执行。
函数节流:
函数节流:是指在在持续触发事件的时候,保证一定时间段内只调用一次事件处理函数
function throttle(func,wait){
let times = null,stateTime = Date.now();
return function(){
let curTime = Date.now();
let that = this,arge = arguments;
let remating = wait - (curTime -stateTime);
if(remating <= 0){ //说明到了执行时间 没有延迟
func.apply(that,arge);
stateTime = Date.now();
}else{
times = setTimeout(func,wait)
}
}
}
function handle() {
console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));
在节流函数内部使用开始时间startTime、当前时间curTime与delay来计算剩余时间remaining,当remaining<=0时表示该执行事件处理函数了(保证了第一次触发事件就能立即执行事件处理函数和每隔delay时间执行一次事件处理函数)。如果还没到时间的话就设定在remaining时间后再触发 (保证了最后一次触发事件后还能再执行一次事件处理函数)。当然在remaining这段时间中如果又一次触发事件,那么会取消当前的计时器,并重新计算一个remaining来判断当前状态。
区别: 函数节流不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数,而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下,我们需要用户在滚动页面时,每隔一段时间发一次 Ajax 请求,而不是在用户停下滚动页面操作时才去请求数据。这样的场景,就适合用节流技术来实现。
参考链接:https://www.cnblogs.com/momo798/p/9177767.html