Javascript

Question

我目前有一个每秒为 HTML 个元素设置动画的循环，在最后一个动画完成后，我想接受用户输入：

playSequence(currentLevel) {
  console.log("playing level " + currentLevel)
  for (var q = 0; q < currentLevel; q++) {
    (function(q) {
      setTimeout(function() {
        var active = '#' + sequence[q].toString(); //the div currently being animated
        console.log(active);
        var currentColor = $(active).css('background-color');
        var newColor = currentColor.replace("0.6", "1.0");

        $(active).animate({
          backgroundColor: newColor
        }, 100, function() {}).delay(900).animate({
        backgroundColor: currentColor
        }, 100, function() {
        if (q === (currentLevel - 1)) {
          console.log("done"); //this runs
          this.getInput(1, currentLevel); //this does not
        }
      });

     }, 1000 * q)
   }(q));
 }    
}

在最后一个动画之后，打印了 "done"，但是没有调用 getInput，因为函数开头的 console.log 没有打印。

为什么在最后一个计时器结束后它运行没有，即使上面的 console.log 结束了？

但是，如果我这样移动 getInput，

playSequence(currentLevel) {
  console.log("playing level " + currentLevel)
  for (var q = 0; q < currentLevel; q++) {
    (function(q) {
      setTimeout(function() {
        var active = '#' + sequence[q].toString(); //the div currently being animated
        console.log(active);
        var currentColor = $(active).css('background-color');
        var newColor = currentColor.replace("0.6", "1.0");

        $(active).animate({
          backgroundColor: newColor
        }, 100, function() {}).delay(900).animate({
        backgroundColor: currentColor
        }, 100, function() {
        if (q === (currentLevel - 1)) {
          console.log("done"); //this runs

        }
      });

     }, 1000 * q)
   }(q));
 }
this.getInput(1, currentLevel); //this runs   
}

然后 getInput 执行运行，但是它没有按我想要的那样工作，因为它在动画完成之前运行s 因为它运行s 超出了 timeOut 的范围.

注意：这包含在 React class 中，getInput 不是 playSequence 中的方法，它们都在名为 "Game"[=13 的 class 中=]

Answer 1

@PHPGlue 的评论有效，留下他们的答案以防将来有人偶然发现它：

If you do var t = this; above all of your Anonymous functions you can use t.getInput() in there

Javascript - 在循环中最后一次超时后调用函数

Javascript - Call function after last timeout in a loop

loops

timeout

function

reactjs