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

Question

您好我发现了这段代码，我想知道如何让它在3秒后停止闪烁

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和setInterval返回一个返回超时/间隔的标识符;然后可以用它来取消它们。

所以我改变了你的代码来演示。如果您有任何问题，请发表评论。

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