使用setTimeout快速调用函数

Question

I want the backgroundColor of a div to change for 250ms, and then change back. for this I use the following code as onclick on the div:

function keyAnimation(key) {
basicColor = key.style.backgroundColor;
key.style.backgroundColor = "red";
setTimeout(function () {
    key.style.backgroundColor = basicColor;
}, 250);

But when I click the div multiple times quickly (within the 250ms) it remains red. How can I code this so it will always go back to the basicColor after 250ms?

Answer 1

Add a flag that blocks additional keypresses:

var running = false;

function keyAnimation(key) {
 if(running) return;
 running = true;

 const basicColor = key.style.backgroundColor;
 key.style.backgroundColor = "red";

 setTimeout(function () {
    key.style.backgroundColor = basicColor;
    running = false;
 }, 250);

}