如何定期重复输入 JavaScript 函数

Question

我设计了一个程序来将字符串键入 div。

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <script>
    var i, speed, thraot, disp;
    i = 0;
    speed = 90;
    thraot = "Jesus is Lord, Forever..."
    disp = document.createElement("DIV");
    disp.setAttribute('id', 'mytxt');
    document.body.appendChild(disp);
    disp.innerHTML = "";

    function myTyping() {
      if (i < thraot.length) {
        disp.innerHTML += thraot.charAt(i);
        i++;
      }
      dd = setTimeout(myTyping, speed);
    }

    setInterval(function() {
      myTyping();
    }, speed * thraot.length);
  </script>
</body>

</html>

我知道 setInterval 在定义的毫秒内重复调用一个函数，但它在这里不起作用。

我希望你们能帮助我让它一遍又一遍地工作。

Answer 1

您可以在 else 块中重置 i 和您的 div 内容。

var i, speed, thraot, disp;
i = 0;
speed = 90;
thraot = "Jesus is Lord, Forever..."
disp = document.createElement("DIV");
disp.setAttribute('id', 'mytxt');
document.body.appendChild(disp);
disp.innerHTML = "";

function myTyping() {
  if (i < thraot.length) {
    disp.innerHTML += thraot.charAt(i);
    i++;
  } else {
    disp.innerHTML = "";
    i=0;
  }
  dd = setTimeout(myTyping, speed);
}

setInterval(function() {
  myTyping();
}, speed * thraot.length);

更新： 添加没有 setInterval() 的示例。

var i, speed, thraot, disp;
i = 0;
speed = 90;
thraot = "Jesus is Lord, Forever..."
disp = document.createElement("DIV");
disp.setAttribute('id', 'mytxt');
document.body.appendChild(disp);

function myTyping() {
  if (i < thraot.length) {
    disp.innerHTML += thraot.charAt(i);
    i++;
  } else {
    disp.innerHTML = "";
    i=0;
  }
  dd = setTimeout(myTyping, speed * thraot.length);
}

myTyping();

Answer 2

您在 setInterval 中调用 myTyping 之前缺少 i = 0 如果你想清除当前文本，也重置disp.innerHTML = ""

Answer 3

非常感谢@user0103，他把我的代码改得非常好。

如何反复刷新一个打字效果函数...

<!DOCTYPE html> 
<html> 

<head> 
 <meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 

<body> 

 <script>
var i, speed, thraot, disp;
i = 0;
speed = 90;
thraot = "Jesus is Lord, Forever..."
disp = document.createElement("DIV");
disp.setAttribute('id', 'mytxt');
document.body.appendChild(disp);
disp.innerHTML = "";

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

(async function() {
    while(true) {
    for(let i = 0; i < thraot.length; ++i) {
        disp.innerHTML += thraot.charAt(i);
        await sleep(speed);
    }
    await sleep(speed);

    disp.innerHTML = "";
  }
})();

</script>
</body> 

</html>

效果很好...

如何定期重复输入 JavaScript 函数

How to repeat a Typing JavaScript function periodically

javascript

function

settimeout

setinterval