javascript - 使用 setTimeout : "in the blink of an eye" 循环 css 样式

Question

我想制作一个宽度每秒减少 1% 的条形 (#innerBar)。

循环似乎不起作用。一眨眼，我的酒吧从 100% 下降到 0%。

function timer(){

    var timer;

    for(i=100;i>=0;i--){

        timer = i.toString() + "%";

        setTimeout(function({$('#innerBar').css("width", timer)}, ((100-i)*1000));

    }
}

注意:#innerBar 是一个带有 css 属性(高度:10 像素)的 DIV。 ** + 来自 timer() 的宽度； **

Answer 1

正如评论中已经说过的，你需要把它放在闭包中。这是一个例子:

function timer() {
  for (i = 100; i >= 0; i--) {
    setTimeout(function(t) {
      return function() {
        var timer = t.toString() + "%";
        $('#innerBar').css("width", timer);
      };
    }(i), ((100 - i) * 1000));
  }
}

timer();

#innerBar {height: 50px; background: green; transition: width 0.2s linear}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="innerBar"></div>

---

解释

So my question are: what is going throught function(t)? and why and how does }(i) work? Is it a multiplication of the fu?

让我们把传递给 setTimeout 的函数体:

function(t) {
  return function() {
    var timer = t.toString() + "%";
    $('#innerBar').css("width", timer);
  };
}(i)

让我们省略里面的部分:

function(t) {
   // do some stuff with t
}(i)

是不是很眼熟？这就像函数体被立即调用并被称为 IIFE。 ，就像说:

(function(a, b) {
    return a + b;
})(2, 3)  // returns 5

所以回到原来的函数，它接受一个参数，t，当我们调用这个函数时，我们将迭代器i作为参数传入(所以 i 的值在函数内部变成了 t )。正如我在评论中所说，为了“获取”i 的当前值而不是获取循环后值，这是必要的。