如何循環播放此功能，以便動畫無限重復？

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秒setInterval再次調用它。

在此示例中，我使用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函數

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();