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

我今年刚开始为课堂编码，不管怎样，这是我用来在我的网站上更改图片的简单计时器，它工作得很好。 我制作了一个jQuery手机网站，通过修改我的HTML等，所有东西都是一样的，包括这段代码，但是当我在手机上查看我的网站时，计时器的速度太快了，大约是每半秒，而不是每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>    

职能工作坊（）{
var pic=新数组（'1.jpg'，'2.jpg'，'3.jpg'）；
var-image=0；
var changePic=setInterval（函数（）{Timer（）}，3000）；
函数计时器（）{
image=Math.floor（Math.random（）*pic.length）；
document.getElementById（'id'）.src=pic[image]；
}
}

---

我考虑过使用setTimeout而不是setInterval，但它不想在我的浏览器中工作，所以我在这里结束了：3有什么想法吗？您在移动浏览器中面临的问题是：在上一个周期结束之前，您的下一个周期运行得太快了。因为每个循环都会进行一些计算，然后更改图像的来源。与台式机相比，移动/移动浏览器的速度非常慢，因此在加载图像之前，新的周期将开始

这里有两种解决方案：

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

---

因此，对于任何有类似问题的人，最终都能解决这个问题。问题是，每次重新加载页面时，都会启动一个新的间隔，而没有完成旧的间隔，从而产生计时器正在加速的错觉。从老师那里得到了一些帮助，我们找到了答案

<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];
}

var-changePic=0；
职能工作坊（）{
changePic=清除间隔（changePic）；
var pic=新数组（'1.jpg'，'2.jpg'，'3.jpg'）；
var-image=0；
changePic=setInterval（函数（）{Timer（）}，3000）；
函数计时器（）{
image=Math.floor（Math.random（）*pic.length）；
document.getElementById（'id'）.src=pic[image]；
}

}

只需全局声明changePic，以便在开始新的间隔之前清除它。希望这能帮助有同样问题的人