Comment déterminer si une fonction asynchrone est terminée avant d'en exécuter une autre dans jQuery (sur des ordinateurs très lents) ?

Question

Par exemple, disons que j'utilise la méthode .addClass(). Vous ne pouvez pas y ajouter un rappel (par exemple, vous ne pouvez pas faire $('...').addClass('...').load('...') ).

Dans la plupart des cas, vous pouvez simplement appeler vos fonctions l'une après l'autre avant d'utiliser .load() et tout ira bien.

Mais que se passe-t-il si j'ai un ordinateur très lent et que l'utilisation de .addClass() prend 5 secondes ? Comment exécuter une autre fonction asynchrone ? sólo après la fin de .addClass(), ou d'ailleurs après la fin de .addClass(). tous La fonction asynchrone JavaScript est terminée ?

EDIT : Je me suis trompé, .addClass est no asynchrone.

Alors, juste pour être sûr :

$('foo').addClass('');
/*this code here will not execute UNLESS the previous line is absolutely finished?*/

Answer 1

addClass n'est pas asynchrone, et il n'existe aucun environnement dans lequel elle prendrait un temps significatif pour effectuer son travail. Les différentes opérations de jQuery que les sont asynchrones (ajax, effets, etc.) acceptent les rappels dans le cadre de leur API.

I penser (sans revenir en arrière et relire l'API) que si une fonction de l'API n'a pas de rappel, vous pouvez supposer que l'opération est synchrone.

L'inverse n'est pas vrai ; jQuery dispose de plusieurs fonctions API ( each par exemple) qui acceptent des rappels qui ne sont pas asynchrone, c'est juste que le rappel est pratique pour d'autres raisons.

Dans tous les cas, toute opération asynchrone doit être clairement identifiée comme telle dans la documentation.

Mise à jour : Pour répondre à votre nouvelle question : Correct, le code après addClass ne s'exécutera pas avant que addClass est terminée. Même si cela a pris une seconde ou deux (ce qui n'est évidemment pas le cas, mais faisons comme si), addClass s'exécutera et reviendra à votre code. Le code suivant ne s'exécutera pas tant qu'il ne l'aura pas fait, et aucun autre code ne pourra s'exécuter pendant ce temps (parce que JavaScript sur les navigateurs web est monotâche, à moins que vous n'utilisiez la fonction travailleurs du web et même dans ce cas, la coordination entre les threads est explicite).

Pour certaines opérations, vous devez laisser au navigateur le temps de traiter ce que vous lui avez demandé de faire. J'essaie de penser à un exemple précis, quelque chose autour de l'ajout de champs de formulaire dans IE. En effet, il s'agit d'ajouter des champs de formulaire dans IE. no des choses simples. Dans ces rare vous pouvez vous assurer que vous avez donné au navigateur la possibilité de faire son travail en lui cédant explicitement la place à l'aide d'une balise setTimeout :

doSomethingTheBrowserHasToThinkAbout();
setTimeout(function() {
    // Now you know the browser's had time to think about it
    doSomethingElse();
}, 0); // <== Won't really be 0, most browsers clamp this to 5-10ms minimum

Mais vous n'êtes pas obligé de le faire (et vous ne voulez pas le faire), sauf pour certaines opérations spécifiques. Je suis désolé de ne pas me souvenir immédiatement d'un exemple, mais nous parlons ici de cas particuliers.

Answer 2

AddClass ne se termine pas pour moi jusqu'à ce que je mette l'ajax/rendering suivant dans un setTimeout. Il doit être asynchrone dans une certaine mesure. J'essaie d'ajouter une classe au body (pour le chargement de gif) et il ajoute simplement l'attribut "class" sans valeur. Lorsque le code suivant est placé dans un setTimeout, il s'exécute. C'est dans Chrome et presque 4 ans plus tard...

Answer 3

addClass n'est pas asynchrone. Dans jQuery, les méthodes asynchrones vous permettent de spécifier une fonction de rappel qui sera appelée lorsque la méthode sera terminée. Si aucune signature de méthode n'accepte de fonction de rappel, il y a de fortes chances que la méthode soit synchrone.