Javascript setInterval/Timeout Not Working

Question

I'm trying to get a timer to type text, delete it, and repeat, cycling through an array of header titles. I can get it to write once, but my limited understanding of timers is hindering me. Here's what I have so far. Before I put the write logic in it's own method, I could call the writeText() plugin manually from the console, but now it's only working once. Here's a link to a codepen

<!-- HTML -->
<div class="holder">
<h1><span>Lorem ipsum dolor sit amet, consectetur adipisicing </span><img id="cursor" src="https://copy.com/oBelwqiCr3Fa"></h1>
</div>


// Javascript
 // counter and array of text to type in the header
 var headerArray = [
         "The Internet can't teach you about marketing",
         "I wish I learned in art school", 
         "Every Successful Startup Eventually Does"
     ],
     headerCounter = 0,
     // headerContainer = $('.holder h1 span'),
     headerContainer = document.querySelector('#cursor').previousElementSibling;


 // function to type the text
 function typeText(i) {
     $('.holder h1 span').text('').writeText(headerArray[i]);
     headerCounter++;

     if (headerCounter >= headerArray.length) {
         headerCounter = 0;
     }
 }


 $(function() {
     // fades cursor in and out
     setInterval(function () {
         $('#cursor').fadeToggle(400);
     }, 400);

     // calls function to type the text
     setInterval(typeText(headerCounter), 5000);
 });



 // plugin that writes out the text like a typewriter
 (function($) {
     $.fn.writeText = function(content) {
         var contentArray = content.split(""),
             current = 0,
             elem = this;

         setInterval(function() {
             if(current < contentArray.length) {
                 elem.text(elem.text() + contentArray[current++]);
             }
         }, 50);
     };
 })(jQuery);


 // plugin that deletes text
 (function($) {
     $.fn.deleteText = function(content) {
         var newContent = content.slice(0, content.length - 1),
             current = 0,
             elem = this;

         setInterval(function() {
             if (elem.text().length == 0) {
                 elem.text(newContent);
                 current--;
             }
         }, 50);
     };
 })(jQuery);

For one, this isn't right: `setInterval(typeText(headerCounter), 5000);` You need to pass a function to `setInterval`. Instead you're invoking it right away and passing the `undefined` return value. — cookie monster, Mar 24 '14 at 16:54
@se_puede_dev Agree with cookie_monster. Check http://codepen.io/anon/pen/DKuAE — Vasiliy vvscode Vanchuk, Mar 24 '14 at 16:57

score 0 · Answer 1 · answered Mar 24 '14 at 17:21

To expand on what cookie monster said, the reason setInterval isn't doing what you expect is because the first argument of setInterval should be a function, but the call to typeText(headerCounter) doesn't return a function. I suspect you mean for typeText to be the function called at an interval. If so, then instead of this:

 setInterval(typeText(headerCounter), 5000);

You should just do this:

 setInterval(typeText, 5000);

Of course, that would cause the function typeText to fail. The quick and dirty fix is to remove the parameter declaration and use the global as an index:

function typeText() {
     $('.holder h1 span').text('').writeText(headerArray[headerCounter]);
     ...

The evils of global variables are beyond the scope of your question, so I'll simply point out that you could implement this with a closure and avoid the use of globals.

score 0 · Accepted Answer · answered Mar 24 '14 at 17:30

here's a working "fiddle" of your code with a few edits: http://jsfiddle.net/P8tc9/

html:

<h1>
<span id="header">asdf</span>
<span id="cursor">|</span>
</h1>

js:

 // counter and array of text to type in the header
 var headerArray = [
     "The Internet can't teach you about marketing",
     "I wish I learned in art school",
     "Every Successful Startup Eventually Does"],
     headerCounter = 0;

 // plugin that writes out the text like a typewriter
 (function ($) {
     $.fn.writeText = function (content, finishedCallback) {
         var contentArray = content.split(""),
             current = 0,
             elem = this,
             intervalHandle;

         intervalHandle = setInterval(function () {
             if (current < contentArray.length) {
                 elem.text(elem.text() + contentArray[current++]);
             } else {
                 // dispose the interval.
                 clearInterval(intervalHandle);

                 finishedCallback();
             }
         }, 50);
     };
 })(jQuery);




 // fades cursor in and out
 setInterval(function () {
     $('#cursor').fadeToggle(400);
 }, 400);

 // function to type the text
 function typeNext() {
     var text = headerArray[headerCounter];
     headerCounter++;
     if (headerCounter >= headerArray.length) {
         headerCounter = 0;
     }

     $('#header').text('').writeText(text, waitThenTypeNext);
 }

 function waitThenTypeNext() {
     setTimeout(typeNext, 2000);
 }

 // get things started.
 typeNext();

Javascript setInterval/Timeout Not Working

2 Answers2