如何使此更改邊框顏色動畫停止

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