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

【问题标题】：javascript function delay or set time out not workingjavascript函数延迟或设置超时不起作用
【发布时间】：2017-05-15 07:23:41
【问题描述】：

我正在尝试在 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>

【问题讨论】：

什么不起作用？我可以看到单词正在延迟和单词输入效果
这里显示每个单词后我需要延迟。现在显示速度非常快。
@PriyeshKumar 在这里我需要在显示每个单词后延迟。现在显示速度非常快。

标签： javascript typed

【解决方案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>

【讨论】：