mousemove 配合节流函数

mousemove 是一个鼠标移动事件，每当鼠标在页面上移动时触发。节流函数是一种优化技术，可以控制函数的执行频率，减少函数的调用次数。

鼠标移动事件通常会频繁触发，如果每次移动都执行一些复杂的操作，可能会导致页面性能下降。为了避免这种情况，可以使用节流函数来控制函数的执行频率。

示例代码如下：

function throttle(func, delay) {
  let timer = null;
  return function() {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, arguments);
        timer = null;
      }, delay);
    }
  };
}

function handleMouseMove(event) {
  // 处理鼠标移动事件的代码
}

const throttledMouseMove = throttle(handleMouseMove, 100); // 设置节流函数的延迟时间为100毫秒

document.addEventListener('mousemove', throttledMouseMove);

在上面的示例中，throttle 函数接受一个函数和一个延迟时间作为参数，并返回一个新的函数。这个新的函数会在延迟时间内只执行一次，避免频繁触发。

在 handleMouseMove 函数中可以处理鼠标移动事件的逻辑。throttledMouseMove 是一个经过节流处理的函数，当鼠标移动事件触发时，会调用 throttledMouseMove 函数。这样就可以控制 handleMouseMove 函数的执行频率，提高页面性能