javascript function delay or set time out not working

i am trying to code the typed jquery functinality in javascript.I am almost there.HEre i need to add a delay after loading the word.like a few secons(lest say 4 sec) after each word loaded. How can i do it. In tried delay and set time out.It is not working for me or i am placing in wrong position. How can i set it.

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>

Solution

Your implementation will have problems if you add “A very long string” in to the array. I’ve modified your code, hope it will help.

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>