情商：()不能正常工作

Question

我有个密码：

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

由于某些原因，只有第五个元素得到背景颜色灰色。怎么啦？

Answer 1

这与i变量的作用域有关。它绑定到for循环，而不是绑定到setTimeout调用的函数。基本上，当调用延迟函数时，i已经增加到4。为了绑定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绑定为函数的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更改等待服务器。

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

Answer 2

尝试使用.delay()，.queue()，递归调用以增量的.index() of .row作为参数的click处理程序，在最初将.eq()设置为event.data：0之后

​

// `0` : `event.data`
$("#button").click(0, function re(event) {
  var i = typeof event.data === "number" ? event.data : event;
  $(".row").eq(i).delay(500).queue(function() {
    $(this).css("background-color", "blue");
    if ($(this).index(".row") < 3) {
      re(i + 1)
    }
  })
})

.row {
  color:orange;
  width:36px;
  padding:8px;
  font-weight:bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<button id="button">click</button>
<span class="row">0</span>
<span class="row">1</span>
<span class="row">2</span>
<span class="row">3</span>
<span class="row">4</span>

​