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

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