如何用JavaScript实现按住鼠标时重复执行函数？附故障代码求修正

你的代码主要有几个关键问题导致无法正常工作，我来逐一拆解并给出修复后的版本：

原代码的核心问题 #

• 同步while循环阻塞事件循环：在mousedown事件里用while循环会完全卡住浏览器的事件处理机制——因为JS是单线程的，同步循环会一直占用线程，导致后续的mouseup事件根本无法触发，定时器也停不下来，甚至页面会失去响应。
• 错误的事件对象引用：this.event是无效的写法，事件处理函数的事件对象是作为参数传入的，不是绑定在this上的。
• 定时器逻辑混乱：你在while循环里重复调用setInterval，这会不断创建新的定时器，而且clearInterval(timer)放在while循环之后，根本没有机会执行。

修复后的代码 #

let timer = null;
const myButton = document.getElementById('myButton');

// 按住鼠标时启动定时器
myButton.addEventListener('mousedown', function() {
  // 先确保没有已存在的定时器，避免重复创建
  if (!timer) {
    timer = setInterval(c_3, 100);
  }
});

// 松开鼠标或鼠标移出按钮时清除定时器
function stopTimer() {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
}

myButton.addEventListener('mouseup', stopTimer);
myButton.addEventListener('mouseleave', stopTimer);

代码说明 #

• 使用addEventListener绑定事件，比直接赋值onmousedown更灵活，也避免覆盖其他事件监听。
• 在mousedown时只创建一次定时器，用timer变量跟踪定时器ID，防止重复创建。
• 同时监听mouseup和mouseleave事件，确保无论用户是松开鼠标还是把鼠标移出按钮，都能停止定时器，避免出现“按住后鼠标移开还继续执行”的问题。
• 每次清除定时器后把timer设为null，方便下次判断是否可以创建新的定时器。

内容的提问来源于stack exchange，提问作者AnthonyThomas01