节流
某个时间段内,只执行一次
可通过时间戳和定时器实现。
时间戳方式:
let throttle = function(func, delay){
let prev = Date.now();
return function(){
var now = Date.now();
if(now-prev>=delay){
func.apply(this, arguments);
prev = Date.now();
}
}
}
定时器方式:
let throttle = function(func, delay) {
let timer = null;
return function() {
if (!timer) {
timer = setTimeout(() => {
func.apply(this, arguments);
timer = null;
}, delay);
}
};
};
防抖
处理函数截止后一段时间依次执行
function debounce(fn, wait) {
let timeout = null;
return function() {
if (timeout !== null) clearTimeout(timeout);//如果多次触发将上次记录延迟清除掉
timeout = setTimeout(() => {
fn.apply(this, arguments);
timeout = null;
}, wait);
};
}
// 处理函数
function handle() {
console.log(Math.random());
}
// 滚动事件
window.addEventListener("onscroll", debounce(handle, 1000));