javascript - 在 JavaScript 中阻止每 X 秒调用一次函数的最简单方法是什么?
问题描述
我四处寻找解决问题的隔音解决方案,但找不到很多这样的问题。
move
每次单击图块时都会调用我的函数,我想阻止用户在当前运动时移动以阻止重叠的执行错误。
功能如下:
move: function(steps){
for (var stepx in steps) {
window.setTimeout(. . ., 300 * stepx);
}
}
哪个迭代,每次调用函数的时间都增加了 300 毫秒。如果是5 步,它将在1.5 秒后完成。
但是,当用户单击两次时,它会设置一组并行处理程序,这些处理程序会从两个区域对用户进行故障处理:正在行进的原始路径和次要路径。
有没有办法阻止执行或排队超时?
解决方案
您只需将超时保存到一个变量并调用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>
推荐阅读
- xero-api - OAuth2 在同意阶段失败
- html - 覆盖 div(添加的 css)不覆盖在 ion-content 内节奏的 Ionic 标题栏
- javascript - 激活和定位预订表格的滑块价格范围
- php - 在PHP中分配给变量时定义类的值
- c - free():在 tcache 2 中检测到双重空闲 - c realloc 错误
- http-headers - 著名的 HPACK 演示图错了吗?
- vue.js - 如何布局 Vue,使页面包含标题/导航,但能够显示独立页面,例如注册
- java - 使用 Java/Groovy 连接大型机?
- java - 为连接表创建 java 实体
- java - Android 10:相机预览中未显示 Camera2 效果