debounce 去抖
适用于resize事件等
在window的’resize’事件中,会被执行很多次,而每一次的执行,都会导致浏览器的重排重绘动作,这时候就有可能出现了页面卡顿现象了。
那么,debounce就出现了,它的作用在于让这个事件处理函数在连续触发时,只在最后一次执行动作,其他时候不予理会
function debounce(fn, wait) {
let timer = null;
return function(...args) {
if (timer) {
clearTimeout(timer);
timer = null;
}
timer = setTimeout(function() {
fn.apply(this, args)
}, wait)
}
}
throttle 节流
适用于mousemove、scroll事件等
跟debounce一样,都是减少事件的执行次数。不同点在于,这个是会在每间隔多少时间就去执行一次事件处理函数,例如200ms,400ms,600ms… 当然,这个时间并不是精准的,只是大概的一个时间间隔
function throttle(fn, wait) {
let timer = null;
return function(...args) {
if (timer) {
return;
}
timer = setTimeout(function() {
fn.call(this, ...args);
timer = null;
})
}
}