função wait () ou sleep () em jquery?

101

Quero adicionar uma classe, aguarde 2 segundos e adicione outra classe.

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

Existe alguma maneira?

jquery

— Steven Moss
fonte

187

setTimeout executará algum código após um atraso de algum período de tempo (medido em milissegundos). No entanto, uma observação importante: devido à natureza do javascript, o resto do código continua a ser executado depois que o cronômetro é configurado:

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

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

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

— ctcherry
fonte

2

esta é uma solução pobre no momento porque perde a vantagem de ter o controle do jquery sobre a animação, como .stop (). uma solução muito melhor é .delay ()

— user151496

7

@ user123blahblah ... esta é a solução APROPRIADA para a questão (que não tem nada a ver com animação). .delay faz jack beans fora da fila de animação. Quem quer que tenha votado em seu comentário errôneo, está se enganando.

— IncredibleHat

34

Isso seria .delay().

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

Se você está fazendo coisas com AJAX, você realmente não deve apenas escrever automaticamente "pronto", você realmente deve esperar por uma resposta e ver se está realmente feito.

— Oscar Godson
fonte

1

Além disso, Steven, você deseja .removeClass('load')adicionar de outra forma as classes load e done, o que provavelmente é indesejado. Se você está realmente esperando que uma ação assíncrona seja concluída, sua melhor aposta é fazer .addClass QUANDO for concluída e for bem-sucedida, se não .addClass ('erro') talvez uma ideia

— Gary Green

52

A função jQUery "delay ()" de nenhuma maneira fornece algo como um recurso de "espera" de propósito geral. É uma parte do sistema de animação e só se aplica à fila de animação. A função sempre retorna imediatamente e a execução continua sem pausa.

— Pointy de

22

delay () não fará o trabalho. O problema com delay () é que ele faz parte do sistema de animação e só se aplica a filas de animação.

E se você quiser esperar antes de executar algo fora da animação ??

Usa isto:

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

O que acontece ?: Nesse cenário, ele espera 600 milissegundos antes de executar o código especificado entre as chaves.

Isso me ajudou muito depois que descobri e espero que ajude você também!

AVISO IMPORTANTE: 'window.setTimeout' acontece de forma assíncrona. Tenha isso em mente ao escrever seu código!

— J. Louw
fonte

20

Perceba que esta é uma questão antiga, mas escrevi um plugin para resolver esse problema que alguém pode achar útil.

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

permite que você faça isso:

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

— madlee
fonte

2

Muito obrigada madlee!

— phil294

2

Existe uma função, mas é extra: http://docs.jquery.com/Cookbook/wait

Este pequeno snippet permite que você espere:

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

— mrzmyr
fonte

2

Você pode usar a .delay()função.
Isso é o que você procura:

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

— The Web Developer Blog
fonte

0

O plugin xml4jQuery fornece o método sleep (ms, callback). A cadeia restante seria executada após o período de sono.

$(".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>

Expandir trecho

— Sasha Firsov
fonte

-1

Usando a função setTimeout, por exemplo Visite aqui por exemplo

— Abhinav Ranjan Sinha
fonte

21

É considerado melhor não confiar em um link para a maioria de sua resposta

— James Jenkins

6

Para fazer backup do comentário de @JamesJenkins, isso ocorre porque os links nem sempre são confiáveis. Se uma pessoa deseja adicionar um link, é melhor incluir também o próprio código em sua resposta.

— Tass