前端开发中，当监听浏览器事件时，如监听鼠标移动或用户输入时，会遇到监听函数短时间内重复触发的问题，这会带来不必要的性能开销。当监听函数会发起异步网络请求时，会发起大量的无效请求。可以对监听函数添加debounce(防抖动)解决这个问题，ts版本的debounce实现如下：
function deBounce<T>(fn: T, delay: number): () => void {
let timer: NodeJS.Timeout
return function(): void {
const args: any[] = Array.prototype.map.call(arguments, val => val);
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
typeof fn === 'function' && fn.apply(null, args);
clearTimeout(timer);
}, delay > 0 ? delay : 100);
};
}
总结
防抖动debounce主要解决函数在短时间内多次触发的问题
网友评论