概念
节流: 规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。
防抖: 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。
作用
限制函数的调用频率。
实现
防抖:(关键字:clearTimeout)
function debounce(fn, time) {
let timer;
return function(){
clearTimeout(timer);
var args = arguments;
var context = this;
timer = setTimeout(() => {
fn.apply(context, args)
}, time);
}
}
节流(关键字:need标记)
function ttrottle(fn, time) {
var need = true;
return function(){
if (!need) return;
var args = arguments;
var context = this;
need = false;
timer = setTimeout(() => {
fn.apply(context, args);
need = true;
}, time)
}
}
参考资料:
https://github.com/woai30231/webDevDetails/blob/master/18/readme.md