javascript函数延迟或设置超时不起作用

Question

我正在尝试在 javascript 中编写类型化的 jquery 功能。我就快到了。我需要在加载单词后添加延迟。比如在每个单词加载后几秒钟(不要说 4 秒)。我该怎么做。在尝试延迟和设置超时。它对我不起作用或者我放置在错误的位置。我该如何设置它。

var count = 0,
  count2 = 0,
  arr = ["SWOO", "EXCITE", "WOW", "AMAZE", "IMPRESS", "EDUICATE"],
  dir = true;
setInterval(function() {
  var interval = setInterval(function() {
    document.getElementById('p1').innerHTML = arr[count].substring(0, count2);
    if (dir) {
      count2++;
      if (count2 >= arr[count].length) {
        dir = false;
      }
    } else {
      count2--;
      if (count2 < 0) {
        dir = true;
        clearInterval(interval);
      }
    }
  }, 100);
  count++;
  if (count == 6) count = 0;
}, 2500);

<div style="width=100%">
  <span id="p1" className="p2 hero-text-animate"></span> <span>them with video</span>
</div>

Answer 1

如果您将“非常长的字符串”添加到数组中，您的实现将会出现问题。 我修改了您的代码，希望对您有所帮助。

var count = 0,
  count2 = 0,
  arr = ["SWOO", "EXCITE", "WOW", "AMAZE", "IMPRESS", "EDUICATE"],
  dir = true;
var p1 = document.getElementById("p1");

// Turning the intervals to on or off.
var onOff = function(bool, func, time) {
  if (bool === true) {
    interval = setInterval(func, time);
  } else {
    clearInterval(interval);
  }
};

var eraseCharacters = function() {
  // How long we want to wait before typing.
  var wait = 1000;

  // How fast we want to erase.
  var erasingSpeed = 100;

  var erase = function() {
    p1.innerHTML = arr[count].substring(0, count2);
    count2--;
    if (count2 < 0) {
      dir = true;

      // Stop erasing.
      onOff(false);

      count++;
      if (count === 6) {
        count = 0;
      }

      // Start typing.
      setTimeout(startTyping, wait);
    }
  };

  // Start erasing.
  onOff(true, erase, erasingSpeed);
};

var startTyping = function() {
  // How long we want to wait before erasing.
  var wait = 4000;

  // How fast we want to type.
  var typingSpeed = 100;

  var type = function() {
    p1.innerHTML = arr[count].substring(0, count2);
    if (dir) {
      count2++;
      if (count2 > arr[count].length) {
        dir = false;

        // Stop typing.
        onOff(false);

        // Start erasing.
        setTimeout(eraseCharacters, wait);
      }
    }
  };

  // Start typing.
  onOff(true, type, typingSpeed);
};

// Start typing after 2 seconds.
setTimeout(startTyping, 2000);

<div style="width=100%">
<!-- Maybe it should be class. -->
  <span id="p1" className="p2 hero-text-animate"></span> <span>them with video</span>
</div>