javascript - setTimeout里面的语句不执行

问题描述

问 题

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秒后，就全部执行了，没有先后次序。

解决方案

自查: 闭包

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

这篇关于javascript - setTimeout里面的语句不执行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！