Javascript Skippng代码

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