Question

我想及时打印字符串字符。为此，我使用了setInterval并使用clearInterval在匹配字符串长度后停止setInerval。代码如下，

const message = "Arnoldk";
const delay = 200;

let x = 0;
let tst = setInterval(_=>{
  const character = message.toLowerCase()[Math.floor(new Date / delay)%(message.length+1)]
  document.body.innerHTML = "<h2>" + message.substr(0, Math.floor(new Date / delay)%(message.length+1))
  if(++x == message.length){
    clearInterval(tst);
  }
},delay)

有时它会在打印消息（“ Arnoldk”）后停止，但有时会转一圈并打印“ Ar”或“ Arn”。我不知道下一轮如何进行。感谢有关此的任何帮助

Answer 1

使用setTimeout可能会使您more control遍历整个循环。像这样尝试

const message = [..."Arnoldk"]; // spread to Array of characters
const delay = 200;
let h2 = document.querySelector("h2");
const timeIt = () => {
  h2.textContent += message.shift();
  message.length && setTimeout(timeIt, delay);
};
setTimeout(timeIt, delay);

<h2></h2>

Answer 2

在计算中使用Date时，有时该值将不符合预期。因为我们有x作为增量值。

const message = "Arnoldk";
const delay = 200;

let x = 0;
let tst = setInterval(_=>{
  
  document.body.innerHTML = "<h2>"+[...message].slice(0, x).join("");
  if(++x == message.length + 1){
    clearInterval(tst);    
  }
},delay)

<html>
<body>
<h2></h2>
</body>
</html>

条件的clearInterval不起作用

2 个答案: