Question

我正在尝试在javascript中对类型化的jquery功能进行编码。我几乎就在那里。我需要在加载单词后添加一个延迟。就像每个单词加载后的几个secons（以免说4秒）。我该怎么做。在尝试延迟和设置时间。它不适合我或我放在错误的位置。我该怎么设置呢。

＆＃13;

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);

＆＃13;

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

＆＃13;

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>

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

1 个答案: