JavaScript防抖

博客

利用一个简单的要求记录一下防抖（多次触发只执行一次）。场景：监听鼠标移动事件，在鼠标移动后输出鼠标的坐标。

let timer = null;

document.addEventListener("mousemove", (e) => {
  
  // 清除之前的计时器
  clearTimeout(timer);

  // 设置新的计时器
  timer = setTimeout(() => {
    // 输出鼠标位置信息
    console.log(`Mouse position: (${e.clientX}, ${e.clientY})`);
  }, 500); // 500毫秒后输出位置信息，你可以根据需要调整时间间隔
});

封装一个简单的防抖函数：

let timeID = null;

addEventListener("mousemove", (e) => {
  let target = stab(e);
  target();
});

// 防抖函数
function stab(e) {
  
  return () => {
    clearTimeout(timeID);
    timeID = setTimeout(() => {
      const h1 = document.createElement("li");
      h1.innerHTML = `${e.clientX + "--------" + e.clientY}`;
      body.appendChild(h1);
    }, 1000);
  };
}

防抖函数的执行原理是通过在事件触发后等待一定时间，如果在这段时间内没有再次触发相同的事件，则执行相应的函数。这样可以避免在短时间内频繁触发事件处理函数，提高程序的性能。

防抖函数通过设置一个计时器来实现等待一定时间后再执行函数的功能。当事件触发时，防抖函数会清除之前的计时器，并设置一个新的计时器，等待一定时间后再执行相应的函数。如果在这段时间内再次触发相同的事件，则会清除之前的计时器并重新设置。这样就能确保在最后一次事件触发后的一定时间内执行函数，实现了防抖的效果。

通过以上原理，防抖函数可以在处理连续触发的事件时，减少不必要的函数执行次数，提高程序的响应性能和用户体验。