重复功能，直到按下屏幕

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>