javascript - 重复功能直到按下屏幕

Question

我正在使用这个 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();

Answer 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>