停止循環文本，但仍運行

Question

Example

var text = 'ENTER...'; 
var chars = text.split(''); 
var enter = document.getElementById("enter") 
var i = 0; 
setInterval (function(){ 
    if (i < chars.length){ 
     enter.innerHTML += chars[i++]; 
    }else{ 
     i = 0; 
     enter.innerHTML = ""; 
    } 
}, 200); 

我想有這個輸入「輸入」的效果，我想知道如何使它只去一次的效果。所以它會輸入「ENTER ...」然後停止。 Example

Answer 1

var text = 'ENTER...'; 
var enter = document.getElementById("enter") 
var i = 0; 
(function nextLetter() { 
    enter.innerHTML = text.substr(0, ++i); 
    if (i < text.length) { 
     setTimeout(nextLetter, 200); 
    } 
})(); 

編輯：你要麼必須使用的setTimeout（一次「睡眠」），或記住的setInterval的返回值，並摧毀clearInterval該定時器，你不需要它/希望它運行後。

Answer 2

var text = 'ENTER...'; 
 
var chars = text.split(''); 
 
var enter = document.getElementById("enter") 
 
var i = 0; 
 
var interval = setInterval (function(){ 
 
    if(i == chars.length) { 
 
     clearInterval(interval); 
 
     return; 
 
    } 
 
    
 
    if (i < chars.length){ 
 
     enter.innerHTML += chars[i++]; 
 
    }else{ 
 
     i = 0; 
 
     enter.innerHTML = ""; 
 
    } 
 
}, 200);

<div id="enter"></div>

Answer 3

如果使用interval，你有clearInterval停止它。阻止它內部的間隔功能，它被聲明爲變量，在if-statement：

var text = 'ENTER...'; 
var enter = document.getElementById("enter") 
var i = 0; 

var interval = setInterval(function() { 
    enter.innerHTML += text[i]; 
    i += 1; 
    if(i === text.length) { 
     clearInterval(interval); 
    } 
}, 200); 

JSFiddle