防抖和节流的作用:
- 都是在高频事件中防止函数被多次调用,是一种性能优化的方案。
它们的区别在于:
- 防抖函数只会在高频事件结束后 n 毫秒调用一次函数
- 节流函数会在高频事件触发过程当中每隔 n 毫秒调用一次函数。
防抖函数:
触发高频事件后一段时间(wait)只会执行一次函数,如果指定时间(wait)内高频事件再次被触发,则重新计算时间。
function debounce(func, wait) {
let timeout = null;
return function () {
let context = this;
let args = arguments;
if (timeout) clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args);
}, wait);
};
}
节流函数:
规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。
function throttle(func, wait) {
let timeout = null;
return function () {
let context = this;
let args = arguments;
if (!timeout) {
timeout = setTimeout(() => {
timeout = null;
func.apply(context, args);
}, wait);
}
};
}