防抖 debounce
例如 window的scroll、resize事件等 是触发比较高事件,频繁的触发和执行会大大的消耗内存,降低浏览器性能。
定义和实现:
function count() {
content.innerHTML = num++;
};
//定义:
debounce(fn,wait)
//实现:
function debounce(count, wait) {
let timeout;
return function () {
let context = this;
let args = arguments;
if (timeout) clearTimeout(timeout);
timeout = setTimeout(() => {
count.apply(context, args)
}, wait);
}
}
xxx.onmousemove = debounce(count,1000);
所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次。
如果在 n 秒内又触发了事件,则会重新计算函数执行时间。
节流(throttle) 所谓节流,就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。
function throttle(count, wait) {
var previous = 0;
return function() {
let now = Date.now();
let context = this;
let args = arguments;
if (now - previous > wait) {
count.apply(context, args);
previous = now;
}
}
}
xxx.onmousemove = throttle(count,1000);