JavaScript 防止事件多次触发

有时我们希望某个事件在被触发后，一段时间内不重复执行，避免重复操作和资源浪费。这种情况下，可以使用一些技巧防止事件多次触发。

方法一：使用定时器

在事件触发后，设置一个定时器，这个定时器可以在指定时间内只允许事件被触发一次。如果在这个时间段内事件又被触发，就需要先清除定时器，再重新设置一个新的定时器。

代码示例：

function doSomething() {
  // do something
}

let timer = null;

function handleEvent() {
  if (timer) {
    clearTimeout(timer);
  }
  timer = setTimeout(doSomething, 1000); // 1000毫秒后执行 doSomething 函数
}

document.addEventListener('click', handleEvent);

方法二：使用节流函数

使用节流函数可以控制事件被触发的频率，即在一段时间内只允许事件被触发一次。

代码示例：

function doSomething() {
  // do something
}

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

document.addEventListener('click', throttle(doSomething, 1000));

方法三：使用防抖函数

使用防抖函数可以等待事件被触发后一段时间再执行，如果在这段时间内事件又被触发，则需要重新等待一段时间。

代码示例：

function doSomething() {
  // do something
}

function debounce(fn, delay) {
  let timer = null;
  return function() {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(function() {
      fn.apply(this, arguments);
    }, delay);
  }
}

document.addEventListener('click', debounce(doSomething, 1000));

总结

以上三种方法可以帮助我们防止事件多次触发，根据实际需求选择适合自己的方法即可。