纯JS实现按住鼠标左键时重复调用函数的方法问询

好问题！要实现按住鼠标左键期间持续重复调用函数，核心是结合鼠标事件与定时器（或帧动画API）来控制函数的触发周期，同时精准区分左键操作。下面是具体的实现方案：

核心思路 #

• 用mousedown事件监听鼠标按下，通过event.button判断是否为左键（值为0），避免响应中键/右键。
• 按下左键时启动周期性触发机制（定时器setInterval或requestAnimationFrame），重复调用目标函数。
• 监听mouseup（鼠标松开）和mouseout（鼠标移出元素/窗口）事件，及时停止触发机制，防止鼠标离开后函数仍持续执行。

基础实现（使用setInterval） #

这是最通用的方案，适合大多数场景，可自定义重复间隔：

// 定义需要重复调用的函数
function myRepeatingFunction() {
  console.log("函数正在重复执行！");
  // 这里可以添加你的业务逻辑
}

let intervalTimerId; // 保存定时器ID，用于后续清除

// 监听鼠标按下事件
document.addEventListener('mousedown', (event) => {
  // 仅响应左键按下（button属性为0）
  if (event.button === 0) {
    // 每100毫秒调用一次函数，可根据需求调整间隔时间
    intervalTimerId = setInterval(myRepeatingFunction, 100);
  }
});

// 鼠标松开时停止重复调用
document.addEventListener('mouseup', () => {
  clearInterval(intervalTimerId);
});

// 鼠标移出窗口/目标元素时停止（防止鼠标移开后仍执行）
document.addEventListener('mouseout', () => {
  clearInterval(intervalTimerId);
});

平滑触发方案（使用requestAnimationFrame） #

如果你的场景需要更流畅的触发（比如动画、UI实时更新），推荐使用requestAnimationFrame，它会和浏览器的刷新频率同步：

function mySmoothRepeatingFunction() {
  console.log("平滑重复执行中...");
  // 这里添加需要流畅触发的逻辑，比如动画更新
}

let animationFrameId;

// 递归调用实现持续触发
function startSmoothRepeat() {
  mySmoothRepeatingFunction();
  animationFrameId = requestAnimationFrame(startSmoothRepeat);
}

document.addEventListener('mousedown', (event) => {
  if (event.button === 0) {
    startSmoothRepeat();
  }
});

document.addEventListener('mouseup', () => {
  cancelAnimationFrame(animationFrameId);
});

document.addEventListener('mouseout', () => {
  cancelAnimationFrame(animationFrameId);
});

额外注意事项 #

• 如果只需要在特定元素上生效，把document换成对应的DOM元素（比如document.getElementById('myButton')）即可。
• 若需要延迟启动（比如按下左键后等待500毫秒再开始重复），可以在mousedown事件中先用setTimeout包裹定时器的启动逻辑。

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