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

我设法解决了这个问题，结果证明是双重的。

首先，click事件被触发两次。这是使用此SO问题修复的：jquery mobile click event fires twice

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

使用@ MjrKusanagi的评论编辑

在每次clearInterval()调用之前对setInterval()进行简单调用已解决问题，确保在重新开始之前始终重置间隔。

原始粗略的解决方法：

我打电话给

 infiniteInterval = null;

每次clearInterval()来电后，

以及

包裹setInterval()次来电

if (infiniteInterval === null)

感谢所有评论过的人，希望这会有时帮助某人：）

Answer 2

首先，由于这句话，你的点击事件会被触发两次：

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

它会监听两个事件click和touchstart，因此会在click事件和touchstart事件一次触发两次。这也是您的代码在PC上运行良好的原因，因为在PC浏览器中没有touchstart事件。

因此，每当您触摸该按钮时，事情就会发生如下：

第一个事件被触发
- 间隔设置，句柄ID为1（例如）
- infiniteInterval = 1
第二次触发事件
- 另一个区间设置，句柄ID为2
- infiniteInterval = 2

现在有两个时间周期而不是一个，你只能跟踪第二个。当您调用clearInterval时，只会清除handle id = 2间隔，并且1仍在运行。

所以解决方案是：

修复两次触发的事件问题，只收听click。（尝试fastclick或zepto或其他lib来处理移动设备上的点击延迟）
正如您自己的回答所说，将infiniteInterval设置为null，如果不是null，则不要再启动另一个间隔。（我认为它比＃34更优雅;在设置之前总是清楚＆＃34;有效，因为infiniteInterval可以作为运行间隔的标志）

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

clearTimeout和clearInterval无法在移动设备上运行

2 个答案: