Javascript img change statement срабатывает слишком рано

Question

Я создаю симулятор дымовой системы и дыма для окиси углерода, с помощью гнезда. Но когда я нажимаю кнопку (щелчок), внутреннее кольцо не станет синим, как предполагается. Это говорит, поскольку я использовал Отзывчивый, но он просто не загорается! Вот мой (незавершенный) код.

<script src="http://code.responsivevoice.org/responsivevoice.js"></script>  
<script> 
function delay(millis) { 
    var date = new Date(); 
    var curDate = null; 
    do { curDate = new Date(); } 
    while(curDate-date < millis); 
} 
function press() { 
    document.getElementById("unit").src = "assets/img/blue.jpg"; 
    delay(500); 
    responsiveVoice.speak("Ready. In the Living Room. Press to test."); 
    delay(500); 
    document.getElementById("unit").src = "assets/img/idle.jpg"; 


} 
</script> 

Answer 1

Вы можете попробовать это:

function delay(millis, action) { 
    setTimeout(action, millis); 
} 

function press() { 
    document.getElementById("unit").src = "assets/img/blue.jpg"; 
    delay(500, 
     function() { 
      responsiveVoice.speak("Ready. In the Living Room. Press to test."); 
     } 
    ); 
    delay(1000, 
     function() { 
      document.getElementById("unit").src = "assets/img/idle.jpg"; 
     } 
    ); 
} 

Это лучше использовать SetTimeout или setInterval, поскольку большинство браузеров используют один поток для Javascript текущая функция сделает страницу отвечать на запросы, пока он ждет. Это позволяет выполнять другие операции асинхронно.