相信大家一定被这俩兄弟整的恶心得很。防抖是啥啊?节流又是啥?啥意思啊。
当然啦,肯定也有大佬比较认真的在学之前就花功夫知道了什么是防抖,什么是节流。
就我个人理解:
- 防抖:多次执行方法变为最后一次执行。
- 节流:多次方法执行稀释为每一段时间执行。
恩……好像有点抽象,我再试试:
场景:你妈妈让你 今天扫地,扫地,加扫地。
- 防抖:在一个时间段里听到的所有扫地,只在最后一吃听到时扫一次。
- 节流:一边扫地一边听,扫完地后歇一歇,接着扫。
恩……好像还是有点抽象。诶,能力有限呀。
接下来奉上封装好的成果:
防抖
/**
* @params fn 回调函数,放入需要防抖处理的方法体
* @params wait 等待时间,在一个时间段内做防抖操作
*/
function antiShake(fn, wait) {
var timeout = null;
return function () {
if (timeout !== null) clearTimeout(timeout);
timeout = setTimeout(fn, wait);
};
}
节流
/**
* @params fn 回调函数,放入需要节流处理的方法体
* @params wait 方法多次执行时,稀释的时间
*/
function reduceExpenditure(fn, wait) {
var timer = null;
var startTime = Date.now();
return function () {
var curTime = Date.now();
var remaining = wait - (curTime - startTime);
var context = this;
var args = arguments;
clearTimeout(timer);
if (remaining <= 0) {
fn.apply(context, args);
startTime = Date.now();
} else {
timer = setTimeout(fn, remaining);
}
};
}
使用示例如下:
window.addEventListener("mousedown", antiShake(click, 1000));
window.addEventListener("mousedown", reduceExpenditure(click, 1000));
function click() {
console.log("测试");
}
如果有更漂亮的写法欢迎来讨论,让我们一起有条不紊的持续进步。
喜欢的话不妨点个小小的赞与关注,您的赞与关注将是我源源不断的前进动力。