停止循环文本，但仍运行

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