javascript - 等号 :() doesn't work properly

Question

我有一个代码:

        $("#button").click(function () {
            for (var i = 0; i < 4; i++) {
                setTimeout(function () {
                    $(".rows:eq("+i+")").css("background-color", "blue");
                },500);
            }
        });

出于某种原因，只有第五个元素的背景颜色为灰色。怎么了？

Answer 1

它与 i 变量的范围有关。它绑定(bind)到 for 循环，而不是绑定(bind)到 setTimeout 调用的函数。基本上，当调用延迟函数时，i 已经递增到 4。为了绑定(bind) i 的当前循环值，请调用另一个函数。 i 被放置在函数堆栈上，因此该值被保留。

这取决于您正在寻找什么样的行为，但如果您想立即更改所有元素的 CSS，@Josh 的评论是最好的。

$("#button").click(function () {
   setTimeout(function (){
     for (var i = 0; i < 4; i++) {
       $(".rows:eq("+i+")").css("background-color", "blue");
     }
   ,500);
});

否则尝试:

bindItoFunc = function (i) {
  return function (){
    $(".rows:eq("+i+")").css("background-color", "blue");
  };
}
$("#button").click(function () {
  for (var i = 0; i < 4; i++) {
     setTimeout(bindItoFunc(i),500);
   }
});

也许更优雅的解决方案是将 i 绑定(bind)为函数的 this 值。

bindItoFunc = function () {
  $(".rows:eq("+this+")").css("background-color", "blue");
}
$("#button").click(function () {
  for (var i = 0; i < 4; i++) {
     setTimeout(bindItoFunc.bind(i),500);
   }
});

提问者表示背景应该按顺序改变。在这种情况下，请根据 i 更改 waitMs。

bindItoFunc = function () {
  $(".rows:eq("+this+")").css("background-color", "blue");
}
$("#button").click(function () {
  for (var i = 0; i < 4; i++) {
     setTimeout(bindItoFunc.bind(i),500+(100*i));
   }
});