EQ :(）不能正常工作

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

Answer 2

嘗試使用.delay()，.queue()，遞歸後最初設置.eq()到event.data調用click處理器與.row遞增.index()作爲參數：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>