Javascript 跳过代码

Question

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

出于某种原因，第一张图片显示，当我单击更改它时，它会跳转到第二张图片。

我的第一张图片看起来像

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

然后我用它来改变图像。

function c1() {
setTimeout(function(){document.getElementById("spinner").src = "img/board/2.png";}, 1000);
c2();
}
function c2() {
setTimeout(function(){document.getElementById("spinner").src = "img/board/3.png";}, 1000);
c3();
}
function c3() {
setTimeout(function(){document.getElementById("spinner").src = "img/board/4.png";}, 1000);
c4();
}
function c4() {
setTimeout(function(){document.getElementById("spinner").src = "img/board/5.png";}, 1000);
c5();
}
function c5() {
setTimeout(function(){document.getElementById("spinner").src = "img/board/6.png";}, 1000);
c6();
}
function c6() {
setTimeout(function(){document.getElementById("spinner").src = "img/board/7.png";}, 1000);
c7();
}
function c7() {
setTimeout(function(){document.getElementById("spinner").src = "img/board/8.png";}, 1000);
c8();
}
function c8() {
setTimeout(function(){document.getElementById("spinner").src = "img/board/9.png";}, 1000);
//c9();
}
function c9() {
setTimeout(function(){document.getElementById("spinner").src = "img/board/10.png";}, 1000);
}

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

Answer 1

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

而不是这个:

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