无法使用 setTimeout() 延迟添加 class

Question

我试图在短时间内显示每个列表项元素，而不是一次显示所有元素。每个列表项都应在相应的 setTimeout 延迟后淡入，但由于某种原因它不起作用。它只将 class 添加到最后一个 li 元素而不是任何其他元素。

// self-invoking anonymous function
(function() {
  "use strict";
  // Local scope vars (elements)
  var slider, submit, display, list, reset;

  // initialize
  function init() {
    // Grab elements
    slider = document.getElementById("slider");
    submit = document.getElementById("submit");
    display = document.getElementById("display");
    list = document.getElementById("list");
    reset = document.getElementById("reset");
    // display change in value on input changed
    slider.addEventListener("input", updateNum, false);
    // print Fibonacci Sequence
    submit.addEventListener("click", printSequence, false);
    // reset Fibonacci Sequence
    reset.addEventListener("click", removePrevious, false);
    // set inital display value
    slider.value = 27;
    updateNum();
  }

  /*
   * Fibonacci Sequence (http://en.wikipedia.org/wiki/Fibonacci_number)
   *
   * The Fibonacci Sequence is a sequence of numbers where each subsequent number
   * is the sum of the previous two.
   *
   * The function below takes in a number n and returns the Fibonacci sequence to
   * the nth number.
   */

  function fibonacci(n) {
    var i, sequence = [1, 1]; // We start our sequence at [1, 1]
    for (i = 1; i < n; i++)
      sequence.push(sequence[i] + sequence[i - 1]);
    return sequence;
  }

  // Update the slider selection
  function updateNum() {
    display.innerHTML = slider.value;
    console.log("changed");
  }

  // Display the Fibonacci sequence
  function printSequence(e) {
    var i, li, textNode, sequence;
    // prevent default submit behavior
    e.preventDefault();
    // remove any previous sequence elements
    removePrevious();
    // Get Fibonacci sequence
    sequence = fibonacci(slider.value);
    // Create child <li>'s
    for (i = 0; i < slider.value; i++) {
      li = document.createElement("li");
      // insert next Fibonacci sequence element
      textNode = document.createTextNode(sequence[i]);
      li.appendChild(textNode);
      list.appendChild(li);
      // setTimeout delay
      setTimeout(function() {
        li.classList.add("animation");
      }, (i + 1) * 500);
    }
    console.log("submitted");
  }


  function removePrevious(e) {
    if (e)
      e.preventDefault();
    while (list.firstChild)
      list.removeChild(list.firstChild);
    console.log("removed");
  }

  // add event listener for page load
  window.addEventListener("load", init, false);

  /* */
})();

.main {
  display: block;
  width: 300px;
  margin: 0 auto;
  font-family: 'Roboto', sans-serif;
}
h1 {
  font-size: 20px;
}
form {
  border: 1px solid #999;
  border-radius: 5px;
  padding: 20px;
  text-align: center;
}
button {
  width: 100px;
  display: inline-block;
}
.input {
  margin: 20px auto;
}
ul li {
  opacity: 0;
}
.animation {
  transition: opacity .5s ease-in;
  opacity: 1.0;
}

<!DOCTYPE html>
<html>

<head>
  <title>Fibonacci Sequence</title>
  <link rel="stylesheet" type="text/css" href="fibonacci.css">
  <link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
  <script type="text/javascript" src="fibonacci.js"></script>
</head>

<body>
  <div class="main">
    <form>
      <h1>Fibonacci Sequence</h1>
      How many numbers in the sequence would you like to calculate?
      <br>
      <div class="input">
        <label for="numbers">Pick a number:</label>
        <br>3
        <input type="range" name="numbers" id="slider" min="3" max="50" step="1" value="27">50
        <br>
        <label for="value">Value:</label><span id="display"></span>
        <br>
      </div>
      <button id="submit">Submit</button>
      <button id="reset">Reset</button>
    </form>
    <ul id="list">
    </ul>
  </div>
</body>

</html>

Answer 1

这是 for 循环和循环内的 setTimeout() 等异步函数的常见问题。

li 变量的值在实际超时回调被调用时会有所不同（无论它是什么，它都会在循环的终止值处，这就是为什么它只在最后一个 li 你创造）。有很多方法可以解决这个问题，方法是创建一个闭包或函数来为每次调用 setTimeout() 分别包含 li 的当前值。

解决它的一种方法是使用内联 IIFE，它为循环的每次迭代捕获 li 的期望值，如下所示：

for (i = 0; i < slider.value; i++) {
  li = document.createElement("li");
  // insert next Fibonacci sequence element
  textNode = document.createTextNode(sequence[i]);
  li.appendChild(textNode);
  list.appendChild(li);
  // setTimeout delay
  // create closure to capture the value of li separately for each iteration
  (function(item) {
    setTimeout(function() {
      item.classList.add("animation");
    }, (i + 1) * 500);
  })(li);
}

无法使用 setTimeout() 延迟添加 class

Unable to add class on a delay with setTimeout()

html

javascript

settimeout