我在移动设备(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
添加到所有点击事件并且没有任何区别。它在所有桌面浏览器上都运行良好。
非常感谢任何帮助,我很乐意回答任何进一步的问题。
谢谢,
本
最佳答案
我已经设法解决了这个问题,事实证明这是双重的。
首先,点击事件触发了两次。这是使用这个 SO 问题修复的:jquery mobile click event fires twice
其次,我没有正确清除间隔。
使用@MjrKusanagi 的评论进行编辑
在每次调用 setInterval()
之前简单调用 clearInterval()
即可解决问题,确保在再次开始之前始终重置间隔。
原始粗略的解决方法:
我打电话
infiniteInterval = null;
在每个 clearInterval()
调用之后,以及用
setInterval()
调用
if (infiniteInterval === null)
感谢所有发表评论的人,希望这有时能对某人有所帮助 :)
关于javascript - clearTimeout 和 clearInterval 不适用于移动设备,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33643744/