Question

出于教育目的，我在JavaScript中编写了以下代码。目标是模拟电传打字机，在写完内容后，机器会在重新开始之前暂停。

var str = 'Some text';
strArray = str.split("");
window.onload = function teleType() {
  var ctrl = 0;
  var wrapId = document.getElementById("wrap");
  var type = setInterval(function() {
    wrapId.innerHTML += strArray[ctrl];
    if (ctrl == strArray.length) {
      wrapId.innerHTML = "";
      ctrl = 0;
      clearInterval(type);
    }
    ctrl++;
  }, 2000);
  setTimeout(teleType, 3000);
}

但是使用这些间隔（mlliseconds），机器开始出现奇怪的行为。它跳转字母（索引）或从开头开始而不到达字符串（数组）的末尾。 setInterval和setTimeout之间发生了什么？

Answer 1

调用setInterval后，立即致电setTimeout 结果，您将在间隔完成之前触发teleType。

您可以在间隔结束时移动setTimeout：

＆＃13;

var str = 'Some text';
strArray = str.split("");
window.onload = function teleType() {
  var ctrl = 0;
  var wrapId = document.getElementById("wrap");
  var type = setInterval(function() {
    wrapId.innerHTML += strArray[ctrl];
    if (ctrl == strArray.length) {
      wrapId.innerHTML = "";
      ctrl = 0;
      clearInterval(type);
      setTimeout(teleType, 300);
    }
    ctrl++;
  }, 200);
}

＆＃13;

<div id="wrap"></div>

＆＃13;

现在，teleType函数运行间隔，当它完成文本编写时，它会清除HTML内容并告诉浏览器在2秒内再次运行teleType。

顺便说一句，您不需要将ctrl设置为0，因为它是本地的，无论如何都会重置。

Answer 2

将文本输出到控制台的示例函数

function showTeleText(text, repeat) {
    var textByChar = text.split(''),
        intermText = '',
        textPos = 0;

    var interval = setInterval(function () {
        intermText += textByChar[textPos++]
        console.log(intermText);

        if (textPos >= textByChar.length) {
            clearInterval(interval);

            if (repeat) {
                setTimeout(function () {
                    showTeleText(text, repeat);
                }, 2000);
            }
        }
    }, 500);
}

window.load致电showTeleText('Some text!', true/false)，

window.load = function() {
    showTeleText('Some text!', true); 
}

在setInterval和setTimeout之间进行配置

2 个答案: