多次触发事件,但是只在触发停止后一段时间内才触发一次,叫做 防抖; 每隔一段时间触发一次叫节流。
举例:
在搜索框中输入,在输入停止200ms后执行搜索叫防抖;在输入过程中每隔2秒执行一次搜索叫做节流。是不是很好理解了~
实现代码:
// 防抖
function debounce(fn, time){
let timer = null;
return function(){ 发布文章
if(timer){
clearTimeout(timer);
}
timer = setTimeout(fn, time);
}
}
window.addEventListener('resize', debounce(() => {console.log('resize')}, 1000));
//节流
function throttle(fn, interval){
let pre = new Date().valueOf();
return function() {
const cur = new Date().valueOf();
if(cur - pre >= interval){
pre = cur;
const args = Array.prototype.slice.call(arguments);
fn.apply(this, args);
}
}
}
window.onresize = throttle(() => console.log('resize'), 2000);
网友评论