如何使此更改边框颜色动画停止

Question

Hi I found this code and I'm wondering how to make it stop blinking after 3 seconds

function flashit()
{

var myborder = document.getElementById('my');

if (myborder.style.borderColor=="green") 

myborder.style.borderColor="red" ;

else 
myborder.style.borderColor="green" ;


} 
setInterval('flashit()', 400) ;

Answer 1

setTimeout and setInterval return an identifier that refers back to the timeout/interval; which can then later be used to unset them.

So I changed your code to demonstrate. Please comment if you have any questions.

function flashit(){
    var myborder = document.getElementById('my');

    if (myborder.style.borderColor=="green"){
        myborder.style.borderColor="red" ;
    } else {
        myborder.style.borderColor="green" ;
    }
}
var intervalId = setInterval(flashit, 400) ;
setTimeout(function() {
    clearInterval(intervalId);
}, 3000);

Answer 2

var refreshIntervalId = setInterval(flashit, 400);

// Stop after 3 seconds
setTimeout(function(){clearInterval(refreshIntervalId)}, 3000);

JSFiddle