防抖和节流
如果我在一个时间内只执行一次,最好用防抖,如果只是想在执行时,设置一下间隔时间那么用节流
防抖是在一个时间内只能执行一次,如果频繁操作就会清除重新开始计算执行,我设置的时间内整个过程中只会执行一次
/*
函数的防抖 debounce,不是某个事件触发就去执行函数,而是在指定的时间间隔内执行一次,减少函数执行的次数
@params:
func:要执行的函数
wait:间隔等待时间
immediate:在开始边界触发,还是结束边界触发 true是开始边界执行
return:
可被调用的函数
*/
function debounce(func,wait,immediate){
let timeout=null, //定时器 setTimeout
result=null; //接收函数返回的结果
return function(...args){
let context=this,
now=immediate && !timeout;
//执行之前一定先清除定时器
clearTimeout(timeout); //防抖的关键,在设置新的定时器之前先把之前的定时器都清除
//如果不是立即执行就走这里定时器
timeout=setTimeout(()=>{ //在结束边界执行
if(!immediate) result=func.call(context,...args);
clearTimeout(timeout);
timeout=null;
},wait);
if(now) result=func.call(context,...args) //立即执行,在开始边界执行
return result;
}
}
let count=0;
function fn(){
console.log(++count);
}
let aa=debounce(fn,100,true);
window.onscroll=aa;
节流是在一个时间内可以执行多次,函数节流是为了缩减执行频率,当达到了一定的时间间隔就会执行一次
/*
* throttle:函数节流是为了缩减执行频率,当达到了一定的时间间隔就会执行一次
* @params
* func:需要执行的函数
* wait:设置的间隔时间
* @return
* 返回可被调用的函数
*/
let throttle = function (func, wait) {
let timeout = null,
result = null,
previous = 0; //=>上次执行时间点
return function (...args) {
let now = new Date,
context = this;
//=>remaining小于等于0,表示上次执行至此所间隔时间已经超过一个时间间隔
let remaining = wait - (now - previous);
if (remaining <= 0) {
clearTimeout(timeout);
previous = now;
timeout = null;
result = func.apply(context, args);
} else if (!timeout) {
timeout = setTimeout(() => {
previous = new Date;
timeout = null;
result = func.apply(context, args);
}, remaining);
}
return result;
};
};
let count = 0;
function fn() {
console.log(++count);
}
let lazyFn = throttle(fn, 1000);
window.onscroll = lazyFn;
版权声明:本文由Web学习之路发布,如需转载请注明出处。