Повторять функцию до тех пор, пока экран не будет нажат

Я использую этот src="http://code.responsivevoice.org/responsivevoice.js" (TTS) и хочу сделать 3 сообщения для воспроизведения в цикле, пока пользователь не нажмет где-нибудь на экране.

Проигрывается 3 сообщения с некоторым интервалом между ними: первый... интервал... второй... интервал... третий... повтор до щелчка, они повторяются до нажатия экрана, есть идеи? попробовал это, но не удалось

var text1 = "This is the first message";
        var text2 = "This is the second message";
        var text3 = "This is the third message";
        var text4 = "This is the fourth message";
    function toggleThem()
{
    window.setTimeout(function(){
            responsiveVoice.speak(text1);
        }, 200);
         window.setTimeout(function(){
            responsiveVoice.speak(text2);
        },2000 );
         window.setTimeout(function(){
            responsiveVoice.speak(text3);
        }, 2500);
}
toggleThem();

1 ответ

Ты можешь использовать setInterval а также clearInterval чтобы ваш текстовый цикл был цикличным, пока в окне не щелкнули:

var text1 = "This is the first message";
var text2 = "This is the second message";
var text3 = "This is the third message";
var text4 = "This is the fourth message";

function speak (text) {
  console.log('Speaking: ', text)
  responsiveVoice.speak(text)
}

function toggleThem() {
  setTimeout(speak, 200, text1)
  setTimeout(speak, 2000, text2)
  setTimeout(speak, 2500, text3)
  setTimeout(speak, 3000, text4)
}

var interval = setInterval(toggleThem, 3500)

window.addEventListener('click', function handler() {
  clearInterval(interval)
  this.removeEventListener('click', handler)
})
<script src="http://code.responsivevoice.org/responsivevoice.js"></script>

Другие вопросы по тегам