javascript function delay or set time out not working

Question

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> 

Answer 1

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>