Javascript를 사용하여 텍스트 색상을 자동으로 앞뒤로 바꿀 수 있습니까?

Question

<div> 
<h2 id="change"> Hello Family</h2> 
</div> 

<script type="text/javascript"> 
setTimeout("firstColor()", 3000) 
function firstColor(){ 
document.getElementById('change').style.color="#ffffff"; 
secondColor(); 
} 

function secondColor(){ 
document.getElementById('change').style.color="#33ccff"; 
} 
</script> 

이 코드는 한 번만 색상을 변경합니다. 두 색상을 앞뒤로 바꿔야합니다. firstColor 함수에서 secondColor 함수를 호출하면 실행되지 않습니다. 지금까지 루프가 아니라는 것을 알고 있습니다 만, secondColor()이 실행되지 않는다는 사실에 의아해합니다. secondColor 함수가 실행되지 않고 왜 루프하는 지 이해하는 데 도움이 필요합니다.

Answer 1

첫 번째 방법으로 secondColor()을 호출하면 화면에서 첫 번째 색상이 렌더링되기 전에 두 번째 색상을 설정하게됩니다. 둘 사이에 시간 초과를 두어야합니다.

그래서,이 같은 더 일반적인 접근 방식을 추천 할 것입니다 :

var myToggle = false; 

setTimeout(function() { 

    if (myToggle) { 
     document.getElementById('change').style.color="#ffffff" 
    } 
    else { 
     document.getElementById('change').style.color="#33ccff"; 
    } 

    myToggle = !myToggle; 

}, 3000)