閃爍的邊框，時間間隔，使用setTimeout（），JavaScript

Question

我想使用setTimeout函數使邊框閃爍，只是我無法找到完美的時間值使它在相同的時間間隔閃爍。 我得到一個長眨眼，一個很短，又長又短。我如何擺脫短的？

這裏是代碼：

function border_color(){ 
    document.getElementById("filedrag").style.borderColor = "white"; 
    setTimeout(border_color, 1500); 
} 

function border_color2(){ 
    document.getElementById("filedrag").style.borderColor = "black"; 
    setTimeout(border_color2, 1000); 
} 

border_color(); 
border_color2(); 

阿洛斯你可以在這裏看到的結果：http://jsfiddle.net/GBGu8/

Answer 1

相同的時間間隔爲其中之一

setTimeout(function() { 
    setInterval(function() { 
     document.getElementById("filedrag").style.borderColor = "white"; 
    }, 1000); 
}, 500); 

setInterval(function() { 
    document.getElementById("filedrag").style.borderColor = "black"; 
}, 1000); 

http://jsfiddle.net/GBGu8/1/

Answer 2

試試這個：用一些時間餘量

function border_color(){ 
document.getElementById("filedrag").style.borderColor = "white"; 
setTimeout(border_color2, 1000); 
} 

function border_color2(){ 
document.getElementById("filedrag").style.borderColor = "black"; 
setTimeout(border_color, 1000); 
} 
document.addEventListener("DOMContentLoaded", border_color,false); 

Answer 3

只要有黑色和白色邊框之間相同的間隔交替，不需要兩個區間：

function border_color() { 
    var style = document.getElementById("filedrag").style, 
     color = style.borderColor; 
    style.borderColor = color == 'white' ? 'black' : 'white'; 
    setTimeout(border_color, 1000); 
} 
border_color();