classList.add() & setTimeout for remove NOT WORKING IN LOOP INSIDE A FUNCTION答案

【问题标题】：classList.add() & setTimeout for remove NOT WORKING IN LOOP INSIDE A FUNCTIONclassList.add() & setTimeout for remove NOT WORKING IN LOOP INSIDE A FUNCTION
【发布时间】：2020-06-29 12:30:46
【问题描述】：

setTimeout 没有按预期工作，

classList.add 有效，但是当为 classList.remove 添加 setTimeout 时，它在控制台中显示错误

“VM1578:5 Uncaught TypeError: Cannot read property 'classList' of null”

var clrArr = ["red", "blue", "yellow", "green"];

var randomClr = [];

//Random Color. Gen

function noGen() {
   return Math.floor(Math.random()*4);
}

function randomClrGen() {
    var no = noGen();
    randomClr.push(clrArr[no]);
    console.log(randomClr);    
}

function randomBtnPress() {
    randomClrGen();
    for(var i = 0; i<randomClr.length; i++){
    document.querySelector("."+ randomClr[i]).classList.add("pressed");
    setTimeout(function () {
        document.querySelector("."+ randomClr[i]).classList.remove("pressed");        
    },100);
    };

}

【问题讨论】：

标签： javascript function for-loop settimeout

【解决方案1】：

使用 let i = 0 代替 var。使用 var 时，i 的上下文会在 setTimeout 运行时丢失。

【讨论】：

但有一个疑问.. add 和 setTimeout 都在同一个 for 循环中，所以 "i" 的值应该保持到最后，对吗？？
添加发生同步。删除发生异步（因为 setTimeout）。

【解决方案2】：

您只拨打了一次randomClrGen。所以，randomClr 只包含一个值。您可以在for..loop 内调用randomClrGen：

var clrArr = ["red", "blue", "yellow", "green"];

var randomClr = [];

//Random Color. Gen

function noGen() {
   return Math.floor(Math.random()*4);
}

function randomClrGen() {
    var no = noGen();
    randomClr.push(clrArr[no]);
    console.log(randomClr);    
}

function randomBtnPress() {
    
    for(let i = 0; i<clrArr.length; i++){
   
    randomClrGen();
    document.querySelector("."+ randomClr[i]).classList.add("pressed");
    setTimeout(function () {
        document.querySelector("."+ randomClr[i]).classList.remove("pressed");        
    },100);
    };

}

randomBtnPress()

【讨论】：

好点。那将是他们的下一个问题。这是另一种看法：randomClr = clrArr.map(()=>clrArr[Math.floor(clrArr.length*Math.random())])
@JayB 是的，mime 的第一个版本是类似的。然后我想建议最小的变化。
如果在 for 循环中调用 randomClrGen()，randomClr.length 将为零，因此 for 循环不会执行。
@AJMALKAREEM 这很好。让我更新一下。

【解决方案3】：

使用方法bind()作为回调函数

function randomBtnPress() {
    
    randomClrGen();
    for( var i = 0; i<randomClr.length; i++){
    document.querySelector("."+ randomClr[i]).classList.add("pressed");
    setTimeout(function (i) {
        document.querySelector("."+ randomClr[i]).classList.remove("pressed");        
    }.bind(null,i),100);// here in this line
    };

}

【讨论】：

不工作相同的结果.. 将 var i 更改为 let i，它工作，感谢您的回复