停止循环播放文本，但仍运行效果

Stop Looping Text but still run the effect

本文关键字：运行 循环 播放 文本      更新时间：2023-09-26

示例

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..."然后停止。例

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销毁该计时器。

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

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>

相关文章：