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
你输出下 i
的值,肯定不对。
我觉得是因为你延迟1秒执行 for
循环已经走完了 所以再当你 arr[i]
的时候这个 i
应该等于 arr.length
了
你得把代码贴出来,就贴这么点,谁能看的出来呢? arr数组里面有什么,i有代表的是多少?
当setTimeout执行的时候,i 的值和你想要的不一样,看看闭包的内容。
你的$("#"+arr[i])没选择到元素
console.log(arr[i])
看看打印出什么
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)
}
}
大概就是这样吧?