javascript - clearTimeout 和 clearInterval 不适用于移动设备

Question

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

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

间隔由以下函数启动:

var interval = function() {
    $('.control-button').fadeIn(300);
    //initiate the interval
    infiniteInterval = window.setInterval(Tiles.infiniteTick, speed); 
};

其中速度在较早的函数中定义(默认值为 300)。 infiniteTick 是一个非常简单的函数，运行良好。我没有在这里解释它，因为它需要对整个程序进行解释，但如果需要，我可以提供代码。

播放和暂停切换如下:

$('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');
    }
});

最后，间隔以此终止(为简单起见，删除了一些纯粹的美学额外内容)

$('body').on('click touchstart', '#stop-button', function() {
    window.clearInterval(infiniteInterval);
    $('.control-button').fadeOut(300);
});

我最初通过研究认为这是由于点击事件没有被正确注册，但正如你所看到的，我已经将 touchstart 添加到所有点击事件并且没有任何区别。它在所有桌面浏览器上都运行良好。

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

谢谢，
本

Answer 1

我已经设法解决了这个问题，事实证明这是双重的。

首先，点击事件触发了两次。这是使用这个 SO 问题修复的:jquery mobile click event fires twice

其次，我没有正确清除间隔。

使用@MjrKusanagi 的评论进行编辑

在每次调用 setInterval() 之前简单调用 clearInterval() 即可解决问题，确保在再次开始之前始终重置间隔。

原始粗略的解决方法:

我打电话

 infiniteInterval = null;

在每个 clearInterval() 调用之后，以及用

包装 setInterval() 调用

if (infiniteInterval === null)

感谢所有发表评论的人，希望这有时能对某人有所帮助 :)