classList.add() & setTimeout for remove 不在函数内循环工作

Question

setTimeout 没有按预期工作，

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

“VM1578:5 未捕获类型错误：无法读取属性 '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);
    };

}

Answer 1

您只调用了一次 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()

Answer 2

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

Answer 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
    };

}

classList.add() & setTimeout for remove 不在函数内循环工作

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

javascript

for-loop

function

settimeout