setTimeout里面的语句不执行

Question

function colorFlash(arr) {
  var colorAfter = "";
  var colorBefore = "";

  $("#count-mark h3").text(count);
  for (var i = 0; i < arr.length; i++) {
    switch (arr[i]) {
      case "red":
        colorBefore = "#9F0F17";
        colorAfter = "#ff4c4c";
        break;
      case "blue":
        colorBefore = "#094A8F"
        colorAfter = "#1c8cff";
        break;
      case "yellow":
        colorBefore = "#CCA707";
        colorAfter = "#fed93f";
        break;
      case "green":
        colorBefore = "#00A74A";
        colorAfter = "#13ff7c";
        break;
    }
    $("#" + arr[i]).css("background-color", colorAfter);
    setTimeout(function() {
      console.log(arr[i]);//显示为undefined,可是为什么上面就正常取到值，这行就不行？
      $("#" + arr[i]).css("background-color", colorBefore);
    }, 1000);
  }
}

---

修改如下：

function colorFlash(arr) {
    var colorAfter = "";
    var colorBefore = "";
    var colorA = [];
    var colorB = [];

    $("#count-mark h3").text(count);
    for (var i = 0; i < arr.length; i++) {
        switch (arr[i]) {
            case "red":
                colorBefore = "#9F0F17";
                colorAfter = "#ff4c4c";
                break;
            case "blue":
                colorBefore = "#094A8F"
                colorAfter = "#1c8cff";
                break;
            case "yellow":
                colorBefore = "#CCA707";
                colorAfter = "#fed93f";
                break;
            case "green":
                colorBefore = "#00A74A";
                colorAfter = "#13ff7c";
                break;
        }
        colorA.push(colorAfter);
        colorB.push(colorBefore);

        (function(i) {
            $("#" + arr[i]).css("background-color", colorA[i]);
            setTimeout(function() {
                $("#" + arr[i]).css("background-color", colorB[i]);
            }, 1000)//假如参数是包含2个内容的数组，本来应该按顺序一个一个来，现在1秒全部完成
        })(i);

    }
    count++;
}

修改后的函数中假如参数中是包含3个内容的数组，想要实现一个内容展示完成，1秒后，第二个内容展示 ，以此类推，可是现在1秒后，就全部执行了，没有先后次序。

Answer 1

自查: 闭包

当运行 setTimeout callback 时，for 循环已完，i = arr.length

Answer 2

你输出下 i 的值，肯定不对。
我觉得是因为你延迟1秒执行 for 循环已经走完了 所以再当你 arr[i] 的时候这个 i 应该等于 arr.length 了

Answer 3

settimeout内的函数是异步执行的，所以应该要用闭包存储i的值;
同时应该要用两个数组来保存每次判断得到的afterColor和beforeColor,否则settimeout回调函数里的color都将是最后一次判断所得color

function colorFlash(arr){
    var bcolos = [],acolors = [];
                //...
    for(var i = 0,len = arr.length;i<len;i++){

    switch(){
    ///....}
    bcolors.push(...);
    acolors.push(...);
    (function(i){
        var $dom = $('#'+arr[i])
        $dom.css('bg-color',bcolors[i]);
        setTimeOut(function(){
            $dom.css('bg-color',acolors[i]);
        },1000)})(i)
   }
   }

大概就是这样吧？

Answer 4

你得把代码贴出来，就贴这么点，谁能看的出来呢？ arr数组里面有什么，i有代表的是多少？

Answer 5

你的$("#"+arr[i])没选择到元素

console.log(arr[i])

看看打印出什么

Answer 6

当setTimeout执行的时候，i 的值和你想要的不一样，看看闭包的内容。