jQuery text() ne fonctionne pas avant un setTimeout?

Question

Après une requête Ajax, j'effectue ce qui suit.

$('#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); 

C'est mon clignotant de fondu entrant/sortant. Ça marche bien.

Cependant, la première ligne n'a aucun effet lorsque j'effectue la partie clignotante. Si je supprime le clignotement, le texte de la durée est modifié. Mais dès que je décommode le clignotant, ça ne change pas du tout le texte ?!

Des idées pourquoi c'est?

Merci à tous pour toute aide

Mise à jour

Le délai fixé est inutile pour ce que je dois faire. Je l'ai enlevé maintenant et j'ai ce qui suit, mais je ne peux toujours pas changer le texte avant les 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

Vous devez passer une fonction de rappel à setTimeout, comme ceci:

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

En ce moment, vous appelez la fonction de fondu immédiatement et l'envoi de la valeur de retour à setTimeout. Vous devriez également changer les valeurs de timeout à augmenter, comme 500, 1000, 1500 etc., sinon tous les fondus d'entrée/sortie se produiront en même temps. Vous pouvez utiliser une boucle pour configurer les valeurs pour vous. Et pourquoi est-ce que vous nettoyez les minuteurs immédiatement - ils n'auront aucun effet si vous le faites.

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)); 
} 

Vous pouvez faire un générique clignoteur comme celui-ci, qui gardera à clignoter jusqu'à ce que vous videz la minuterie:

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

var t = setInterval(blink, 500); 

Cela va continuer jusqu'à ce que vous appelez clearInterval(t).

---

Mise à jour: La raison pour laquelle le premier appel text n'a pas d'effet parce que le second text appel est exécuté immédiatement et le texte est écrasé. Notez que les fadeIn et fadeOut retournent immédiatement, avant que l'animation soit terminée, de sorte que le deuxième appel text s'exécute juste après cela. Si vous voulez attendre jusqu'à ce que l'animation est terminée, vous devez joindre un rappel à la dernière fonction de fondu, comme ceci:

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

Answer 2

Que diriez-vous à l'aide du jQuery Blink plugin à la place. Vous pouvez le