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 are之后，所有超时都会执行。下一个函数的调用需要延迟1000 is，而不是动画本身。

而不是这样：

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

Answer 2

您应该将功能添加到超时值本身，而不是将它们放在外部。喜欢

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

}