防抖动debounce ts实现

2021-04-09  本文已影响0人  ashyanSpada

前端开发中,当监听浏览器事件时,如监听鼠标移动或用户输入时,会遇到监听函数短时间内重复触发的问题,这会带来不必要的性能开销。当监听函数会发起异步网络请求时,会发起大量的无效请求。可以对监听函数添加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主要解决函数在短时间内多次触发的问题

上一篇 下一篇

猜你喜欢

热点阅读