Javascript跳过代码

所以我尝试使用javascript创建一个动画，我正在做的是显示一个图像，等等，显示第二个，等等，显示等等

由于某种原因，第一个图像显示，当我单击更改它时，它会跳到第二个图像

我的第一张照片看起来像

<img src="img/board/1.png" id="spinner" alt="Click Me!" onclick="c1()"> </img>

---

为什么会跳过中间的图像。

您的所有函数都会立即执行，并且每个函数都会在大致相同的时间设置超时。然后，1000毫秒后，所有超时都将执行。下一个函数的调用需要延迟1000毫秒，而不是动画本身

与此相反：

function c1() {
  setTimeout(function () { animateSomething1() }, 1000)
  c2();
}

function c2() {
  setTimeout(function () { animateSomething2() }, 1000);
  c3() ...
}

你需要这个：

function c1() {
  animateSomething1(); 
  setTimeout(function () { c2(); }, 1000)
}

function c2() {
  animateSomething2()
  setTimeout(function () { c3() }, 1000);
}

请注意，动画非常适合于只增加索引并调用自身的单个函数：

---

您应该将函数放入超时本身，而不是将它们保留在外部。像

function c8() {
setTimeout(function(){document.getElementById("spinner").src = "img/board/9.png";c9();}, 1000);

}

---

图像可能不会被缓存，加载时间可能会超过1秒。您应该了解数组（）和递归。这将使代码简单得多。我如何让它停止或随机停止。

function advanceSpinner(i) {
  i = i || 1;

  if (i > 10)
    i = 1; // change this to return if you don't want to run forever

  document.getElementById("spinner").src = "img/board/" + i + ".png";

  setTimeout(function () { advanceSpinner(i + 1) }, 1000);
}

function c8() {
setTimeout(function(){document.getElementById("spinner").src = "img/board/9.png";c9();}, 1000);

}