防抖:是指一段时间内,没有再触发事件,就执行这个事件;如果一段时间内又触发了这个时间,则清空已经间隔的时间,重新开始计时,等待事件触发。
场景:搜索框输入关键字,实时请求后台获取结果。
function func(context) {
console.log(context);
}
function debounce(fn, delay) {
let timer = null;
return (args) => {
clearTimeout(timer);
timer = setTimeout(() => {
fn(args);
}, delay)
}
}
let debounceFunc = debounce(func, 500);
document.getElementById('input').addEventListener('keyup', function(e){
debounceFunc(e.target.value)
});
节流:当连续触发某个事件时,运用节流可以保证在一段时间内,只触发一次事件。
场景:监听滚动事件,做相应操作,比如:懒加载。
function throttle(fn, delay){
let last, timer;
return (args) => {
let now = +new Date();
if(last && now < last+delay) {
clearTimeout(timer);
timer = setTimeout(() => {
last = now;
fn(args);
}, delay)
} else {
fn(args);
last = now;
}
}
}
let throttleFunc = throttle(func, 1000);
document.getElementById('input').addEventListener('keyup', function(e){
throttleFunc(e.target.value)
});