首页 > 解决方案 > 在 JavaScript 中阻止每 X 秒调用一次函数的最简单方法是什么?

问题描述

我四处寻找解决问题的隔音解决方案,但找不到很多这样的问题。

move每次单击图块时都会调用我的函数,我想阻止用户在当前运动时移动以阻止重叠的执行错误。

功能如下:

move: function(steps){
    for (var stepx in steps) {
      window.setTimeout(. . ., 300 * stepx);
    }
}

哪个迭代,每次调用函数的时间都增加了 300 毫秒。如果是5 步,它将在1.5 秒后完成。

但是,当用户单击两次时,它会设置一组并行处理程序,这些处理程序会从两个区域对用户进行故障处理:正在行进的原始路径和次要路径。

有没有办法阻止执行或排队超时?

标签: javascriptjquery

解决方案


您只需将超时保存到一个变量并调用clearTimeout()- 但是,您的示例在一个循环中创建了多个超时,因此您需要将它们全部保存然后全部停止。可以这样做:

var timers = [];
var running = false;

function makeSteps(steps) {
  if (!running) {
    running = true;
    for (var i = 0; i <= steps; i++) {
      timers.push(setTimeout(function() {
        console.log("Step");
      }, 300 * i));
    }
  }
}

function stopAllSteps() {
  for (var i = 0; i <= timers.length; i++) {
    clearTimeout(timers[i]);
  }
  running = false;
  console.log("stopped!");
}
<button type="button" onclick="makeSteps(100)">Start</button>
<button type="button" onclick="stopAllSteps()">Stop</button>


推荐阅读