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

setInterval timer works too fast in mobile

本文关键字：工作 计时器 移动 setInterval      更新时间：2023-09-26

我今年刚刚开始为课堂编码，不管怎样，这是我用来更改网站上图片的简单计时器，它工作得很好。我通过调整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提前

所以，对于任何有类似问题的人来说，终于解决了这个问题。问题是，每次重新加载页面时，都会启动一个新的间隔，而没有完成旧的间隔，这会给人一种计时器正在加速的错觉。从老师那里得到了一些帮助，我们想明白了。

<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，就可以在开始新的间隔之前清除它。希望这能帮助到任何有同样问题的人。

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

这里有几个解决方案：

  • 增加时间
  • 或者，在移动设备上显示时具有较小/优化的图像
相关文章：