更新按钮按下的CSS

Question

我试图从类内更新按钮的类。目前类只更新后计时器()函数完成，但我希望它更新时，按下按钮。我可以看到类名正在改变，但它没有及时更新。

function reply_click(clicked_id){
id = clicked_id;
var colorSwitch = document.getElementById(id).className;
if(colorSwitch){
colorSwitch = color_check(colorSwitch, id);
console.log(colorSwitch);
console.log(time());
}
}
function time(){
const utcStr = new Date();
return utcStr;
}
//Checks color of pressed button
function color_check(color, id){
if(color == "btnRed"){
alert("Slot already booked!!!!");
}else if(color == "btnYellow"){
alert("You have already booked this slot!!!!!");
}else if(color == "btnGreen"){
alert("Slot booked!!!!!");
color = "btnYellow";
document.getElementById(id).className = color;
var result = timer(new Date());
console.log("1: " + result);
}
return color;
}
//Access python timer class
function timer(time){
let Time =  new Date(Date.parse(time));
const timeMin = Time.getMinutes();
console.log(Time);
while (true){
let currentTime = new Date();
currentTime = currentTime.getMinutes();
if((currentTime - timeMin) >= 0.1){
//ajax post
fetch('/background_process_test')
.then(function (response) {
return response.json();
}).then(function (text) {
console.log('GET response:');
console.log(text.greeting); 
if(text.greeting == true){
console.log(text.greeting);
//add 45 minute timer to recheck the room is empty
}
});
return false;
}
}
}

我试图更新类在colorCheck()

Answer 1

不确定我是否正确理解你的问题，但这里有一个按钮在X分钟后改变颜色的例子，或者当你按下它时。setTimeout函数在后台运行，不会阻塞其他代码的执行。

let btn = document.querySelector("button")
btn.addEventListener("click", (e) => {
e.target.classList.add("active")
})
setTimeout(() => {
btn.classList.add("active")
}, 1000)

button {
padding: 10px;
font-size:1em;
background-color:lightblue;
border:0;
}
.active {
background-color:darkblue;
color:white;
}

<button>
Click here
</button>