我怎样才能循环这个函数，使动画无限重复？

Question

我正在尝试使此函数适应无限循环，但通常的 setInterval 不起作用。我需要循环完全重新开始，首先清除我猜想的功能吗？

let ascii = document.querySelector('.ascii').textContent;
let asciiLetters = ascii.split('');
let displayLetters = document.querySelector("#text");

function animate() {
  asciiLetters.length > 0 ? displayLetters.innerHTML += asciiLetters.shift() : clearTimeout(moveType);
  let moveType = setTimeout(animate, 5);
};

animate();

body {
  background-color: black;
}

.container {
  color: lime;
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}

.ascii {
  display: none;
}

  <div class="container">
    <pre class="ascii ascii-0">
    __     _ 
   / /_   (_)
  / __ \ / / 
 / / / // /  
/_/ /_//_/  
    </pre>
    <pre id="text"></pre>
  </div>

我确定有一个简单的解决方案，但我正在努力寻找它！

Answer 1

你想要这样的东西吗？

let ascii = document.querySelector('.ascii').textContent;
let asciiLetters = ascii.split('\n');
let displayLetters = document.querySelector("#text");

function animate() {
  let html = displayLetters.innerHTML;
  const line = asciiLetters.shift();
  asciiLetters.push(line);
  html = asciiLetters.slice(-5).join('\n');
  displayLetters.innerHTML = html;
  setTimeout(animate, 100);
};

animate();

body {
  background-color: black;
}

.container {
  color: lime;
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}

.ascii {
  display: none;
}

  <div class="container">
    <pre class="ascii ascii-0">
    __     _ 
   / /_   (_)
  / __ \ / / 
 / / / // /  
/_/ /_//_/  





    </pre>
    <pre id="text"></pre>
  </div>

Answer 2

将你的代码放在一个函数中，在为它设置动画后清除#text pre 元素，并每隔 X 秒设置一次间隔以再次调用它。

在这个例子中我使用了 2 秒延迟：

function start() {
  let displayLetters = document.querySelector("#text");
  let ascii = document.querySelector('.ascii').textContent;
  let asciiLetters = ascii.split('');
  function animate() {
    let moveType = setTimeout(animate, 5);
    asciiLetters.length > 0 ? displayLetters.innerHTML += asciiLetters.shift() : clearTimeout(moveType);
  };
  animate();
  document.querySelector("#text").innerHTML = ' ';
}
setInterval(start, 2000); // infinite loop with 2 seconds delay.

body {
  background-color: black;
}

.container {
  color: lime;
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}

.ascii {
  display: none;
}

<div class="container">
  <pre class="ascii ascii-0">
    __     _ 
   / /_   (_)
  / __ \ / / 
 / / / // /  
/_/ /_//_/  
  </pre>
  <pre id="text"></pre>
</div>

Answer 3

没有 setInterval 函数

code in JS Bin

    let ascii = document.querySelector('.ascii').textContent;
let asciiLetters = ascii.split('');
let displayLetters = document.querySelector("#text");
let asciiLettersLength = asciiLetters.length;

let i =0;

let animate = function(){


if(asciiLetters.length > 0){ 


displayLetters.innerHTML += asciiLetters[i];
i+=1;
//start over set counter to 0, clean the screen
if(i === asciiLettersLength){
  i=0;
  displayLetters.innerHTML = "";
}

} else {
  clearTimeout(moveType);
}


  let moveType = setTimeout(animate, 5);

};

animate();

我怎样才能循环这个函数，使动画无限重复？

How can I loop this function so that the animation repeats infinitely?

javascript

loops

function

settimeout

setinterval