fonction wait () ou sleep () dans jquery?

Je veux ajouter une classe, attendre 2 secondes et ajouter une autre classe.

.addClass("load").wait(2sec).addClass("done");

Y a-t-il un moyen?

setTimeout exécutera du code après un délai d'un certain temps (mesuré en millisecondes). Cependant, une note importante: en raison de la nature du javascript, le reste du code continue de s'exécuter après la configuration du minuteur:

$('#someid').addClass("load");

setTimeout(function(){
  $('#someid').addClass("done");
}, 2000);

// Any code here will execute immediately after the 'load' class is added to the element.

Ce serait .delay().

http://api.jquery.com/delay/

Si vous faites des trucs AJAX, vous ne devriez vraiment pas simplement écrire automatiquement "done", vous devriez vraiment attendre une réponse et voir si c'est réellement fait.

delay () ne fera pas le travail. Le problème avec delay () est qu'il fait partie du système d'animation et ne s'applique qu'aux files d'attente d'animation.

Et si vous voulez attendre avant d'exécuter quelque chose en dehors de l'animation ??

Utilisez ceci:

window.setTimeout(function(){
                 // do whatever you want to do     
                  }, 600);

Que se passe-t-il?: Dans ce scénario, il attend 600 millisecondes avant d'exécuter le code spécifié entre les accolades.

Cela m'a beaucoup aidé une fois que je l'ai compris et j'espère que cela vous aidera également!

AVIS IMPORTANT: «window.setTimeout» se produit de manière asynchrone. Gardez cela à l'esprit lorsque vous écrivez votre code!

Sachez que c'est une vieille question, mais j'ai écrit un plugin pour résoudre ce problème que quelqu'un pourrait trouver utile.

https://github.com/madbook/jquery.wait

vous permet de faire ceci:

$('#myElement').addClass('load').wait(2000).addClass('done');

Il y a une fonction, mais c'est extra: http://docs.jquery.com/Cookbook/wait

Ce petit extrait de code vous permet d'attendre:

$.fn.wait = function(time, type) {
    time = time || 1000;
    type = type || "fx";
    return this.queue(type, function() {
        var self = this;
        setTimeout(function() {
            $(self).dequeue();
        }, time);
    });
};

Vous pouvez utiliser la .delay()fonction.
Voici ce que vous recherchez:

.addClass("load").delay(2000).addClass("done");

Le plugin xml4jQuery donne la méthode sleep (ms, callback). La chaîne restante serait exécutée après la période de sommeil.

$(".toFill").html("Click here")
                .$on('click')
                .html('Loading...')
                .sleep(1000)
                .html( 'done')
                .toggleClass('clickable')
                .prepend('Still clickable <hr/>');

.toFill{border: dashed 2px palegreen; border-radius: 1em; display: inline-block;padding: 1em;}
        .clickable{ cursor: pointer; border-color: blue;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script type="text/javascript" src="https://cdn.xml4jquery.com/ajax/libs/xml4jquery/1.1.2/xml4jquery.js"></script>
        <div class="toFill clickable"></div>

Utilisation de la fonction setTimeout, par exemple Visitez ici par exemple