开发JavaScript俄罗斯方块：如何实现按住按钮重复执行函数？

嘿，我完全懂你的需求——给安卓手机端的俄罗斯方块加触摸按钮，按住的时候要持续调用right()这类移动函数，松开就停，而且不想用jQuery，还要符合你的JS知识水平对吧？其实这个需求用原生JS就能轻松实现，核心就是用setInterval和事件监听来控制定时器的启停，我给你一步步讲清楚：

核心思路 #

当用户按住按钮时，我们先立即执行一次目标函数（避免按住后有延迟才动，手感更自然），然后启动一个定时器，每隔固定时间重复调用这个函数；当用户松开按钮（或者鼠标/手指离开按钮），就清除这个定时器，停止重复调用。

通用代码实现 #

先写一个通用的工具函数，这样四个箭头按钮都能复用，不用重复写逻辑：

// 用来存储定时器的ID，方便后续清除
let holdTimer = null;

/**
 * 启动按住动作：立即执行一次目标函数，然后定时重复执行
 * @param {Function} action - 要重复执行的函数（比如right()、left()）
 * @param {number} interval - 重复执行的间隔时间（毫秒，默认100ms，可根据手感调整）
 */
function startHold(action, interval = 100) {
  // 先立即执行一次，提升操作手感
  action();
  // 启动定时器，每隔interval毫秒执行一次action
  holdTimer = setInterval(action, interval);
}

// 停止按住动作：清除定时器
function stopHold() {
  if (holdTimer) {
    clearInterval(holdTimer);
    holdTimer = null;
  }
}

给单个按钮绑定事件（以右键为例） #

假设你的右键按钮HTML是这样的：

<button id="right-btn">→</button>

然后给它绑定鼠标和触摸事件（兼顾PC和手机端）：

// 获取右键按钮元素
const rightButton = document.getElementById('right-btn');

// 鼠标按下 / 触摸开始时，启动按住动作
rightButton.addEventListener('mousedown', () => startHold(right));
rightButton.addEventListener('touchstart', (e) => {
  // 阻止触摸事件的默认行为，避免手机页面滚动/缩放
  e.preventDefault();
  startHold(right);
});

// 鼠标松开 / 鼠标离开按钮 / 触摸结束时，停止按住动作
rightButton.addEventListener('mouseup', stopHold);
rightButton.addEventListener('mouseleave', stopHold);
rightButton.addEventListener('touchend', stopHold);

复用逻辑到其他按钮 #

剩下的左、上、下按钮，只需要替换对应的按钮ID和目标函数就行，比如左键：

const leftButton = document.getElementById('left-btn');
leftButton.addEventListener('mousedown', () => startHold(left));
leftButton.addEventListener('touchstart', (e) => {
  e.preventDefault();
  startHold(left);
});
leftButton.addEventListener('mouseup', stopHold);
leftButton.addEventListener('mouseleave', stopHold);
leftButton.addEventListener('touchend', stopHold);

注意事项 #

• 调整间隔时间：startHold函数的第二个参数默认是100毫秒，你可以根据游戏的手感调整，比如改成80ms会让移动更快，150ms更慢。
• 触摸事件的preventDefault：一定要加，不然在手机上按住按钮时，可能会触发页面的滚动或缩放，严重影响游戏体验。
• mouseleave事件：加上这个是为了防止用户按住按钮后，鼠标/手指不小心移开按钮，但函数还在持续调用的情况，让逻辑更严谨。

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