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任何想法？ Ty提前

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

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

你有几个解决方案：

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

setInterval计时器在移动设备中运行得太快

2 个答案: