Javascript clearTimeout和clearInterval在移动设备上不工作

我在移动设备（Android和iOS、手机和平板电脑）上清除标准javascript计时器时遇到问题。
我的页面包含2个按钮，一个播放/暂停切换和一个停止按钮（两个图标），简单的HTML是：

<span class="fa fa-pause control-button" id="pause-button"></span>
<span class="fa fa-stop control-button" id="stop-button"></span>

其中速度在早期函数中定义（默认值为300）。无穷大是一个非常简单的函数，它工作得很好。我没有在这里解释它，因为它需要对整个程序进行解释，但如果需要，我可以提供代码

播放和暂停切换如下所示：

$('body').on('click touchstart', '#pause-button', function() {
    if ($(this).hasClass('fa-pause')) {
        window.clearInterval(infiniteInterval);
        $(this).removeClass('fa-pause');
        $(this).addClass('fa-play');
    } else {
        infiniteInterval = window.setInterval(Tiles.infiniteTick, speed);
        $(this).removeClass('fa-play');
        $(this).addClass('fa-pause');
    }
});

最后，间隔终止于此（为了简单起见，删除了一些纯粹的美学附加内容）

通过研究，我最初认为这是由于没有正确注册单击事件，但正如您所看到的，我在所有单击事件中添加了

touchstart

，这没有任何区别。它在所有桌面浏览器上都工作得非常好

非常感谢您的帮助，我很乐意回答任何进一步的问题

谢谢，

---

本

我已经设法解决了这个问题，结果是双重的

首先，click事件触发了两次。使用此SO问题解决了此问题：

其次，我没有正确地清理间隔

编辑@MjrKusanagi的评论

在每次调用

setInterval（）

之前，只需调用

clearInterval（）

即可解决此问题，确保在再次启动之前始终重置间隔

原始粗略解决方法：

我打过电话

 infiniteInterval = null;

在每次

clearInterval（）

调用之后，以及使用

if (infiniteInterval === null)

---

感谢所有发表评论的人，希望这会在某个时候对某人有所帮助：）

首先，由于这句话，您的点击事件将触发两次：

$('body').on('click touchstart', '#pause-button', function() { ...

它侦听两个事件

单击

和

触摸启动

，因此它将被触发两次，一次在

单击

事件上，一次在

触摸启动

事件上。这也是您的代码在pc上运行良好的原因，因为pc浏览器中没有

touchstart

事件

所以每次你按那个按钮，事情都是这样的：

• 触发的第一个事件
  • 间隔集，句柄id为1（例如）

  • 无穷区间=1

• 触发第二个事件
  • 另一个间隔集，句柄id为2

  • 无穷区间=2

现在有两个计时周期在运行，而不是一个，你只知道第二个。调用

clearInterval

时，只有

句柄id=2

间隔被清除，并且

1

仍在运行

因此，解决方案是：

通过只听

单击

，修复两次触发的事件问题。（尝试

fastclick

或

zepto

或其他lib来处理移动设备上的点击延迟）

正如您自己的回答所说，将

infiniteInterval

设置为

null

，如果它不是

null

，请不要再开始另一个间隔。（我认为它比“设置前始终清除”更优雅，因为

infiniteInterval

是运行间隔的标志）

---

希望这些可以解决您的问题。

我相信您有两个处理同一按钮的处理程序。我不确定它是否有效，但如果类是您想要决定的唯一方式，请尝试`$（element）.hasClass（）`。我认为值得一提的是，在所有设备上，函数中的其他代码都可以正常执行。如果您可以访问mac，您可以尝试安装apple的开发工具，从那里，您可以将iPhone/iPad模拟器与safari结合使用，在移动设备上调试javascript问题。尝试以下操作：在代码中的何处声明

infiniteInterval

？在包含这些函数的模块的开头，

var infiniteInterval=null将infiniteInterval设置为null不应清除间隔。事实上，我很有信心这并不是解决你问题的方法。变量infiniteInterval只包含一个整数。将它设置为另一个值（如null）与实际清除间隔无关。我认为是的。不过，如果您知道我为什么喜欢听：）在清除与指针相关的时间间隔之前，检查它的null是否只是防止您意外更改指针，这是可行的。我认为最好的设计模式是在将间隔设置为另一个值之前总是清除它。如果您想自己测试这个：1。停止检查infiniteInterval是否为空。2.然后在每个setInterval实例之前，添加对clearInteral的调用。如果您同意这是正确的解决方案，请编辑此答案并解释原因，然后接受您自己的答案。我也会投票。
if (infiniteInterval === null)

$('body').on('click touchstart', '#pause-button', function() { ...