防抖和节流的使用时期

Hslven

已于 2023-06-28 11:19:18 修改

阅读量210

点赞数

文章标签：前端

于 2023-06-28 11:03:05 首次发布

本文链接：https://blog.csdn.net/lok_p/article/details/131432509

版权

文章讲述了防抖和节流在处理频繁触发的事件时的不同策略。防抖在规定时间内没有再次触发才执行，而节流则是限制执行频率。在定时切换模块中，当需要在鼠标移动时重置定时器，节流更为合适，因为它可以控制执行次数，防止因持续移动鼠标导致的过度触发。示例代码展示了防抖和节流函数的实现，并应用于mousemove事件。

摘要由CSDN通过智能技术生成

防抖和节流的使用时期

防抖：每次执行会重置事件。设置一个时间，在时间内，如果没有再次触发，则执行。如果再次触发，重置这个时间。

节流：减缓触发次数，在指定的时间间隔内最多执行一次。相当于加大每次移动触发的间隔，如10秒内触发了10000次，通过节流我们可以设置一个时间间隔，让他10秒内触发5次

当我们写一个定时切换模块的时候，需求我们移动鼠标重置定时器，但是一直移动鼠标会一直触发，所以我们需要优化，但是防抖无法满足我们的需求，因为 如果我在5分钟内一直移动鼠标就会导致还没有触发重置，仍然会切换模块，所以这种情况我们使用节流，让他减缓触发次数

// 防抖
function debounce(func, wait) {
  let timeout;
  return function () {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), wait);
  };
}
window.addEventListener('mousemove', debounce(this.graphMove, 1000))

// 节流
function throttle(func, wait) {
  let timeout;
  let previous = 0;
  return function () {
    const context = this;
    const args = arguments;
    const now = Date.now();
    if (!previous) previous = now;
    const remaining = wait - (now - previous);
    if (remaining <= 0) {
      if (timeout) {
        clearTimeout(timeout);
        timeout = null;
      }
      previous = now;
      func.apply(context, args);
    } else if (!timeout) {
      timeout = setTimeout(() => {
        previous = Date.now();
        timeout = null;
        func.apply(context, args);
      }, remaining);
    }
  };
}
window.addEventListener('mousemove',throttle(this.graphMove, 1000);