javascript - 用CSS和JS按时间间隔显示文本

Question

我想使用 setInterval() 创建JS函数，一次显示一个字符的视觉效果，间隔为100每个字符毫秒，在 Angular 应用程序上。

请注意，这发生在 index.html 中在 <app-root> 内标签，因此它只会在应用程序启动时出现。 看完setInterval() page我认为这会成功，所以这是我的代码:

var divs=['rBox','aBox','tBox','sBox'];
var index=-1;

function displayChars(){
  for(container of divs){
    document.getElementById(container).style.visibility='hidden';  
  }
  var fun = setInterval(display,100);
}

function display(){
  if(index < 4){
    document.getElementById(divs[++index]).style.visibility='visible'
  }else{
    clearInterval(fun);
  }
}
displayChars();

<app-root>
  <div class="rats-div">
    <div id="rBox">1</div>
    <div id="aBox">2</div>
    <div id="tBox">3</div>
    <div id="sBox">4..</div>
  </div>
</app-root>

但它不显示任何内容，包含数字的 div 在那里，可见性设置为 hidden但似乎它们从未设置为 visible

我看不出问题出在哪里。如果我从算法的 Angular 看代码，我想我可能不太了解 setInterval() 的内部工作原理。 .

Answer 1

fun 没有全局声明

而且 index 增加了太多

代码的粗略更新:

var divs=['rBox','aBox','tBox','sBox'];
var index=-1;
var fun
function displayChars(){
  for(container of divs){
    document.getElementById(container).style.visibility='hidden';  
  }
  fun = setInterval(display,100);
}

function display(){
  if(index < 3){
    document.getElementById(divs[++index]).style.visibility='visible'
  }else{
    clearInterval(fun);
  }
}
displayChars()

<app-root>
  <div class="rats-div">
    <div id="rBox">1</div>
    <div id="aBox">2</div>
    <div id="tBox">3</div>
    <div id="sBox">4..</div>
  </div>
</app-root>