Javascript 单击一个按钮停止3个图像旋转

我一直在努力解决如何在不同的时间停止3个图像，同时按下水果机的手柄。我可以使用JavaScript来完成这项工作

const images = ["plum.jpg", "cherries.jpg", "pineapple.jpg", "lemon.jpg", "apple.jpg", "bananas.jpg"];

var count;
const speed = 100;

function beginShow(){
    count = 20;
   nextImage();}

function nextImage(){
changeImage("pic1");

count = count - 1;  // count down
if (count > 0)      // repeat unless we're at zero
setTimeout(function(){alert("Try Again") }, 1000); // pop up after 1 second saying try again 
changeImage("pic2");

count = count - 1;  // count down
if (count > 0)      // repeat unless we're at zero
{
    tim = setTimeout("nextImage();", 200);
}

changeImage("pic3");

count = count - 1;  // count down
if (count > 0)      // repeat unless we're at zero

{
    tim = setTimeout("nextImage();", 300);
}}

function changeImage(imageId){
var rand = Math.floor(Math.random() * images.length);
document.getElementById(imageId).src =images[rand];
// changes handle from not pulled to pulled
var image = document.getElementById('Lever');
if (image.src.match("Lever2")) {
    image.src = "lever1.jpg";
} else {
    image.src = "lever2.jpg"; }}    

---

由于这似乎是一个学校的练习，我不会发布代码

但是，请注意：

count

是一个全局变量，可以从封闭范围（函数）中访问。或计数在运行时创建，并设置其默认值（

0

）

此外，您的设置超时似乎是错误的

如果您打算在

x

时间内执行一项操作，然后执行

x+1

，然后执行

x+2

，然后只需连接超时（请执行）

编辑： 一个可能有帮助的例子如下：

function roll(){
   var timer1 = window.setTimeout(function(){document.getElementById("pic1").src=images[Math.floor(Math.random() * images.length)];}, 1000);
   var timer2 = window.setTimeout(function(){document.getElementById("pic2").src=images[Math.floor(Math.random() * images.length)];}, 2000);
   var timer3 = window.setTimeout(function(){document.getElementById("pic3").src=images[Math.floor(Math.random() * images.length)];}, 3000);
}

---

由于这似乎是一个学校的练习，我不会发布代码

但是，请注意：

count

是一个全局变量，可以从封闭范围（函数）中访问。或计数在运行时创建，并设置其默认值（

0

）

此外，您的设置超时似乎是错误的

如果您打算在

x

时间内执行一项操作，然后执行

x+1

，然后执行

x+2

，然后只需连接超时（请执行）

编辑： 一个可能有帮助的例子如下：

function roll(){
   var timer1 = window.setTimeout(function(){document.getElementById("pic1").src=images[Math.floor(Math.random() * images.length)];}, 1000);
   var timer2 = window.setTimeout(function(){document.getElementById("pic2").src=images[Math.floor(Math.random() * images.length)];}, 2000);
   var timer3 = window.setTimeout(function(){document.getElementById("pic3").src=images[Math.floor(Math.random() * images.length)];}, 3000);
}

---

我通过添加超时来编辑代码，就像你建议的那样，但是现在它们只更改了一次，所以我不知道我是否正确地执行了{timeoutID=setTimeout（nextImage（“pic3”），3000）；}请不要在“注释字段”中发布代码，编辑你的问题，并在那里发布格式化的更改。要将图像更改3次，对吗？然后，设置

x

时间的超时，然后设置

x+延迟

时间，然后设置

x+（2*延迟）

时间。另外，据我所知，setTimeout函数非常不安全，因为它使用参数

eval

（查看internet上的

eval is evil

）来创建函数，并且您已经知道自己的函数……您所做的主要问题是您不理解正在运行的代码。再检查一遍，做一个更简单的代码我希望每个图像改变20次，但是当前的函数像一个水果机一样旋转3个图像，我希望它们停下来1乘1这里有3个图像彼此相邻，每个旋转大约20次，我希望它们都在同一时间开始，但在不同的时间结束，它们都连接到一个按钮上通过添加超时来编辑代码，就像你建议的那样，但是现在它们只更改了一次，所以我不知道我是否做得正确{timeoutID=setTimeout（nextImage（“pic3”），3000）；}请不要在“注释字段”中发布代码，编辑你的问题，并在那里发布格式化的更改。要将图像更改3次，对吗？然后，设置

x

时间的超时，然后设置

x+延迟

时间，然后设置

x+（2*延迟）

时间。另外，据我所知，setTimeout函数非常不安全，因为它使用参数

eval

（查看internet上的

eval is evil

）来创建函数，并且您已经知道自己的函数……您所做的主要问题是您不理解正在运行的代码。再检查一遍，做一个更简单的代码我希望图像每个改变20次，但是当前的功能像一个水果机一样旋转3个图像，我希望它们停下来1乘1这里有3个相邻的图像，每个旋转大约20次，我希望它们都在同一时间开始，但在不同的时间结束，它们都连接到一个按钮