I'm converting some JavaScript code to jQuery and have e to a halt, Heres the code...
HTML:

<div id="text"></div>

JavaScript:

keywords = [ "one", "two", "three"]
var allowed = true;
function ChangeText ( ) {
   if(allowed)
   {
      var keyword = keywords[ Math.floor( Math.random() * keywords.length ) ]
      document.getElementById( "text" ).innerHTML = keyword;
   }
   setTimeout( "ChangeText()", switchTime );
} 
ChangeText();

jQuery:

var changeAllowed = true;
$(document).ready(function ChangeText() {
   if(changeAllowed)
   {
      $("#text").fadeOut(500);
      var keyword = keywords[ Math.floor( Math.random() * keywords.length ) ];
      $("#text").text(keyword).fadeIn(1000);
   };
   setTimeout( "ChangeText()", 2000 );
});
ChangeText();

What it should do is fade the text out then back in with a new string (which it does on refresh) every 2 seconds or so, The jQuery effects are working, it just seems to be the setTimeout() or I've not named the function properly.

I'm converting some JavaScript code to jQuery and have e to a halt, Heres the code...
HTML:

<div id="text"></div>

JavaScript:

keywords = [ "one", "two", "three"]
var allowed = true;
function ChangeText ( ) {
   if(allowed)
   {
      var keyword = keywords[ Math.floor( Math.random() * keywords.length ) ]
      document.getElementById( "text" ).innerHTML = keyword;
   }
   setTimeout( "ChangeText()", switchTime );
} 
ChangeText();

jQuery:

var changeAllowed = true;
$(document).ready(function ChangeText() {
   if(changeAllowed)
   {
      $("#text").fadeOut(500);
      var keyword = keywords[ Math.floor( Math.random() * keywords.length ) ];
      $("#text").text(keyword).fadeIn(1000);
   };
   setTimeout( "ChangeText()", 2000 );
});
ChangeText();

What it should do is fade the text out then back in with a new string (which it does on refresh) every 2 seconds or so, The jQuery effects are working, it just seems to be the setTimeout() or I've not named the function properly.

• javascript
• jquery
• settimeout

• 1 Where is switchTime defined? – Briguy37 Commented Jul 20, 2011 at 18:10
• Your code will actually probably work in IE8 and below, because you're using a named function expression and IE leaks the name into the enclosing variable environment. Fixed in IE9 I believe. – user113716 Commented Jul 20, 2011 at 18:21

4 Answers 4

Passing a string to setTimeout will evaluate from the global scope, in which the funcion is not defined. Pass it directly instead, so that it will evaluate from the function's scope, in which the function (obviously) is defined:

setTimeout( ChangeText, 2000 );

setTimeout( arguments.callee, 2000 );

arguments.callee is the "self pointer" for functions. Biggest advantage is that it works with anonymous functions and named functions alike. So, for jQuery:

var changeAllowed = true;
var keywords      = [anything];

$(document).ready(function () {
   if(changeAllowed) {
      var keyword = keywords[ Math.floor( Math.random() * keywords.length ) ];
      $("#text").fadeOut(500).text(keyword).fadeIn(1000);
   };
   setTimeout(arguments.callee, 2000 );
});

Note: This answer is from 2008 originally. Nowadays the proper way to do this has changed. As noted in the ments you'd use a named function expression (NFE), like this:

var changeAllowed = true;
var keywords      = [anything];

$(document).ready(function fadeKeyword() {
   if(changeAllowed) {
      var keyword = keywords[ Math.floor( Math.random() * keywords.length ) ];
      $("#text").fadeOut(500).text(keyword).fadeIn(1000);
   };
   setTimeout(fadeKeyword, 2000 );
});

arguments.callee will still work in non-strict mode but cause an error in strict more.

Use it without parens and quotes: setTimeout(ChangeText, 2000 );

UPDATE

My first solution got out of synch when the display queue got behind. Here is updated code that uses callbacks so the timing is always right, along with the test fiddle:

var changeAllowed = true;
var keywords = ["test1", "test2", "test3", "test4", "test5"];
var hide = true;

var toggleTextFade = function() {
    if(changeAllowed) {
        var keyword =keywords[Math.floor(Math.random() * keywords.length)];

        $("#text").text(keyword).fadeIn(1000,null,function(){
            $("#text").fadeOut(500,null,toggleTextFade)});
    }               
};


$(document).ready(toggleTextFade);