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

如果您使用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

Answer 3

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>

停止循环文本，但仍然运行该效果

3 个答案: