setInterval计时器在移动设备中工作太快

Question

我今年才开始上课编码，无论如何，这是我用来更改网站图片的简单计时器，效果很好。 我通过改编HTML等为类制作了一个jQuery Mobile网站，因此包括这部分代码在内，一切都一样，但是当我在手机上查看我的网站时，计时器的运行速度太快了，就像每半秒而不是每3秒秒。

这是代码：

<script type="text/javascript">
function workshop(){
    var pic = new Array('1.jpg', '2.jpg', '3.jpg');
    var image = 0;
    var changePic = setInterval(function() {Timer()}, 3000);
function Timer(){
    image=Math.floor(Math.random()*pic.length);
    document.getElementById('id').src=pic[image];
}
}
</script>    

我看着使用setTimeout而不是setInterval，但是它不想在我的浏览器中工作，所以我在这里结束了：3有什么想法吗？ 提前输入

Answer 1

因此，对于那些曾经遇到过类似问题的人，终于明白了。 问题在于，每次重新加载页面时，都会开始一个新的间隔而没有完成旧间隔，从而产生了计时器加速的错觉。 得到了老师的帮助，我们找到了答案。

<script type="text/javascript"> 
var changePic = 0;
function workshop(){
    changePic = clearInterval(changePic);
    var pic = new Array('1.jpg', '2.jpg', '3.jpg');
    var image = 0;
    changePic = setInterval(function() {Timer()}, 3000);
function Timer(){
    image=Math.floor(Math.random()*pic.length);
    document.getElementById('id').src=pic[image];
}

}

只需全局声明changePic即可在开始新间隔之前将其清除。 希望这对遇到相同问题的人有所帮助。

Answer 2

您在移动浏览器中面临的问题是：下一个周期运行如此之快，直到上一个周期结束。 因为每个循环都要进行一些计算，然后才更改图像的来源。 与台式机相比，移动/移动浏览器的速度非常慢，因此在加载图像之前，新的周期开始了。

您在这里有几种解决方案：

• 增加时间
• 或者，在移动设备上显示时，图像要小/优化。