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