Question

我正在寻找stop此文本转换器，restart和reset的解决方案。部分工作，但start和reset我仍有问题。整个事情用于字幕。也许有更好的解决方案。有人能帮我吗？非常感谢。

var texter = new Array
texter[0]='good day';
texter[1]='How can I be stopped and started ?';
texter[2]='';
texter[3]='everything should start again from the beginning with the reset button.';
texter[4]='that would be great !!!';
texter[5]='Many thanks for the help';
texter[6]='';
texter[7]='Ciao';
var i=0;

function changer(){
  document.getElementById('transbox').innerHTML=texter[i];
  i++;
  if (i>7) i=0;
    window.setTimeout("changer()", 2500);
}

var info = document.getElementById("transbox");
    info.style.display = "none"; 
	
// Infobox display
function buttonShow() {  
    info.style.display = "";
}
// Infobox hidden
function buttonHide() {  
    info.style.display = "none";
}
function buttonStop() {  
    changer = stop;
}
function buttonSrart() {  
    window.setInterval ( "changer()", 2500 );	
}
function buttonClear() {	
    changer(i=0);	
}

#transbox {
    font-family:Arial,sans-serif;
    color:black;
    text-align:center;   
    margin-top:80px;			
}

<button type="button" onclick="buttonShow()">CC Open</button>
<button type="button" onclick="buttonHide()">CC Close</button>
<button type="button" onclick="buttonStop()">CC Stop</button>
<button type="button" onclick="buttonPlay()">CC Play</button>
<button type="button" onclick="buttonReset()">CC Reset</button>

<body onLoad="changer()" id="text">			
		
<div id="transbox"></div>

<p id="Text1"></p>
<p id="Text2"></p>

Answer 1

这非常简单

存储计时器的ID以便停止
将索引i设置回0以进行重置。
恢复计时器而不重置i以恢复。
BONUS：请勿对用户字符串评估（"changer()"）传递对该函数的引用。

var texter = new Array
texter[0]='good day';
texter[1]='How can I be stopped and started ?';
texter[2]='';
texter[3]='everything should start again from the beginning with the reset button.';
texter[4]='that would be great !!!';
texter[5]='Many thanks for the help';
texter[6]='';
texter[7]='Ciao';
var i=0;
var timerId;

function changer(){
  document.getElementById('transbox').innerHTML=texter[i];
  i++;
  if(i==texter.length-1) i = 0;
}

var info = document.getElementById("transbox");
    info.style.display = "none"; 
	
// Infobox display
function buttonShow() {  
    info.style.display = "";
}
// Infobox hidden
function buttonHide() {  
    info.style.display = "none";
}
function buttonStop() {  
    clearInterval(timerId);
}
function buttonPlay() {  
    timerId = window.setInterval ( changer, 2500 );	
}
function buttonReset() {	
    i = 0;
    changer();
    clearInterval(timerId);
}

#transbox {
    font-family:Arial,sans-serif;
    color:black;
    text-align:center;   
    margin-top:80px;			
}

<button type="button" onclick="buttonShow()">CC Open</button>
<button type="button" onclick="buttonHide()">CC Close</button>
<button type="button" onclick="buttonStop()">CC Stop</button>
<button type="button" onclick="buttonPlay()">CC Play</button>
<button type="button" onclick="buttonReset()">CC Reset</button>

<body onLoad="changer()" id="text">			
		
<div id="transbox"></div>

<p id="Text1"></p>
<p id="Text2"></p>

Answer 2

您可以保留计时器的ID：

var timer;
function start() {
    stop();
    timer = setInterval(function() {
        document.getElementById('transbox').innerHTML=texter[i];
        i++;
        if (i>=7) i=0;
    }, 2500);
}

function stop() {
    if (timer) {
        clearInterval(timer);
    }
}

如何启动和停止此文本更改器？

2 个答案: