JSFiddle - React, Tailwind, and code Playground

by CriddleCraddle

HTML

<button id='btn2' class='btn'>I flash right away</button>
<button id='btn1' class='btn'>I flash in 5 seconds</button>
<br />
<br />
<br />
<button id='btn3' class='btn'>I change color and stay</button>

CSS

.btn {
    background-color: gray;
}
.i_flash1 {
    background-color: pink;
}
.i_flash2 {
    background-color: yellow;
}

JavaScript

function flashIt(element, times, klass, delay) {
    for (var i = 0; i < times; i++) {
        setTimeout(function () {
            $(element).toggleClass(klass);
        }, delay + (300 * i));
    };
};

//----------------------------------------------

//Below will flash in five seconds
setTimeout(function () {
    flashIt('#btn1', 10, 'i_flash1', 500)
}, 5000);

//Below will flash immedietly 
flashIt('#btn2', 10, 'i_flash2', 500)

//Below will flash immedietly and then remain the changed color
flashIt('#btn3', 9, 'i_flash2', 500)