jQuery text() does not work before a setTimeout?

Question

Hello all,

After an Ajax request, I perform the following.

$('#change_ts').text('Defaults Changed!');

//blinking part
var t = setTimeout($('#change_ts').fadeIn('slow'), 500);
clearTimeout(t);
var t = setTimeout($('#change_ts').fadeOut('slow'), 500);  
clearTimeout(t);
var t = setTimeout($('#change_ts').fadeIn('slow'), 500); 
clearTimeout(t);
var t = setTimeout($('#change_ts').fadeOut('slow'), 500);  
clearTimeout(t);  
var t = setTimeout($('#change_ts').fadeIn('slow'), 500); 
clearTimeout(t);
var t = setTimeout($('#change_ts').fadeOut('slow'), 500);  
clearTimeout(t);  
var t = setTimeout($('#change_ts').fadeIn('slow'), 500); 
clearTimeout(t);
var t = setTimeout($('#change_ts').text('Change Text/Size'), 500); 
clearTimeout(t);

It is my make-shift fade in/out blinker. It works well.

However, the first line has no effect when I perform the blinking part. If I remove the blinking the text of the span is changed. But as soon as I uncomment the blinker, it doesn't change the text at all?!

Any ideas why this is?

Thanks all for any help

Update

The set timeout is useless for what I need to do. I have removed it now and I have the following, but I still can not change the text before the fade in/outs?

$('#change_ts').text('Defaults Changed!');

$('#change_ts').fadeIn('slow');
$('#change_ts').fadeOut('slow');
$('#change_ts').fadeIn('slow'); 
$('#change_ts').fadeOut('slow');  
$('#change_ts').fadeIn('slow'); 
$('#change_ts').fadeOut('slow');  
$('#change_ts').fadeIn('slow');

$('#change_ts').text('Change Text/Size'); 

Answer 1

You should pass a callback function to setTimeout, like this:

var t = setTimeout(function() { $('#change_ts').fadeIn('slow') }, 500);

Right now, you're calling the fade function immediately and sending the return value to setTimeout. You should also change the timeout values to be increasing, like 500, 1000, 1500 etc., otherwise all the fade in/out will occur at the same time. You could use a loop to set-up the values for you. And why are you clearing the timers immediately - they won't have any effect if you do so.

for (var i = 1; i <= 6; i += 2) {
    setTimeout(function() { $('#change_ts').fadeIn('slow') }, 500 * i);
    setTimeout(function() { $('#change_ts').fadeOut('slow') }, 500 * (i + 1));
}

You can also make a generic blinker like this, which will keep blinking until you clear the timer:

var state = true;
function blink() {
  state = !state;
  if (state)
    $('#change_ts').fadeIn('slow');
  else
    $('#change_ts').fadeOut('slow');
}

var t = setInterval(blink, 500);

This will keep going until you call clearInterval(t).

---

Update: The reason the first text call has no effect is because the second text call is executed immediately and the text is overwritten. Note that the fadeIn and fadeOut return immediately, before the animation is completed, so the second text call executes right after that. If you want to wait until the animation is complete, you need to attach a callback to the last fade function, like this:

$('#change_ts').fadeIn('slow', function() {
  $('#change_ts').text('Change Text/Size'); 
});

Answer 2

How about using the jQuery Blink plugin instead. You can see the demo here :)