防抖:用户多次触发同一个方法最后整合为一次,如下面函数:
function debounce(fn,delayTime){
let time = null;
return function (){
if(time){
clearInterval(time)
}
time = setTimeout(fn, delayTime);
}
}
const test = function (){
console.log("23333");
}
const runTest = debounce(test, 3000);
runTest();
runTest();
runTest();
delayTime时间结束之前,无论触发多少次函数,最后只会执行一次
节流:在一定时间内只执行一次函数,代码如下:
function throttle (fn,delay){
let prevTime = 0;
return function(){
let nowTime = Date.now()
if(nowTime - prevTime > delay){
fn.apply(this,arguments);
prevTime = nowTime;
}
}
}
const test = function () {
console.log("2333");
};
const run = throttle(test, 3000);
run();
run();
run();
主要逻辑是比较本次触发时间和上一次触发时间的差值,如果相差大于delay的值就再执行一次,上面这种方法是函数周期前执行,就是第一次执行后隔3秒再执行下次
function throttle (fn,delay){
let prevTime = Date.now();
return function(){
let nowTime = Date.now()
if(nowTime - prevTime > delay){
fn.apply(this,arguments);
prevTime = nowTime;
}
}
}
const test = function () {
console.log("2333");
};
const run = throttle(test, 3000);
setTimeout(run,3000)
这种是周期后执行,第一次执行是3秒后执行