jQuery: espera / demora 1 segundo sem executar código

129

Não consigo obter o .delaymétodo funcionando no jQuery:

$.delay(3000); // not working
$(queue).delay(3000); // not working

Estou usando um loop while para esperar até que um valor alterado descontrolado seja maior ou igual a outro e não consigo encontrar nenhuma maneira de interromper a execução por X segundos.

javascript jquery delay wait seconds Brian Graham
fonte
tente usar setTimeout no retorno de chamada
theshadowmonkey 17/01
qual versão do jquery você está usando?
L7ColWinters
1
não é para isso que a função delay é projetada, ela é projetada para uso entre eventos jquery na fila (como fade (). delay (). show ()). Você precisa da função setTimeOut.
JoJa
@ JoJa: Você está correto no ponto principal, no entanto, a forma sem argumentos de mostrar (e ocultar) não usa a fila de efeitos.
Jay Tomten
3
Por favor, indique o que você está tentando alcançar com o atraso. Todo o JavaScript é executado em um único encadeamento e o congelamento por X segundos pode causar uma experiência adversa ao usuário.
Dmitry Shkuropatsky

Respostas:

176

$ .delay é usado para atrasar animações em uma fila, não para interromper a execução.

Em vez de usar um loop while, você precisa chamar recursivamente um método que executa a verificação a cada segundo usando setTimeout:

var check = function(){
    if(condition){
        // run when condition is met
    }
    else {
        setTimeout(check, 1000); // check again in a second
    }
}

check();
Justin Niessner
fonte
1
Eu acho que setTimeout é suficiente.
Jiemurat 28/10/2013
3
Você é o cara da bomba, é exatamente isso que eu precisava para consertar meu código.
jemiloii
@Jiemurat e qualquer outra pessoa no futuro: setTimeout não interrompe o fluxo de execução. O grande código de Niessner obtém isso até que as condições se tornem verdadeiras!
Gabrer
Se você não precisar interromper o fluxo de execução, pode simplesmente usar setTimeout().
Joshua Pinter
i sempre obter "cheque não é uma função", a minha função de verificação tem dois parâmetros que
Preto
211

Você também pode atrasar algumas operações desta maneira:

setTimeout(function (){

  // Something you want delayed.

}, 5000); // How long do you want the delay to be (in milliseconds)?
Matt Sich
fonte
7
Apenas um FYI, isso não interrompe o fluxo de execução; portanto, se você precisar "parar tudo" por alguns segundos, precisará de algo parecido com o que Niessner postou.
Joshua Pinter
Sim ... é um retorno de chamada para a função e não bloqueia. Obrigado pela resposta, o problema foi corrigido.
Bertus Kruger
se a frequência for extremamente curta e esperamos que essa função funcione para sempre, isso acabará com a pilha?
Bunny suicídio
16

ES6 setTimeout

setTimeout(() => {
  console.log("we waited 204586560000 ms to run this code, oh boy wowwoowee!");
}, 204586560000);

Edit: 204586560000 ms é o tempo aproximado entre a pergunta original e esta resposta ... assumindo que calculei corretamente.

thedanotto
fonte
2
muito bom usando o tempo aproximado da questão original para esta resposta
Fuzzybear
9

A delayfunção do jQuery deve ser usada com efeitos e filas de efeitos; consulte os delaydocumentos e o exemplo:

$('#foo').slideUp(300).delay(800).fadeIn(400);

Se você quiser observar uma variável para alterações, poderá fazer algo como

(function() {
    var observerInterval = setInterval(function() {
        if (/* check for changes here */) {
           clearInterval(observerInterval);
           // do something here
        }
    }, 1000);
})();
Julian D.
fonte
setInterval tem um segundo parâmetro obrigatório, o tempo em milissegundos;)
sara_thepot
1
Obrigado @ sara.potyscki, corrigido.
Julian D.
@JulianD. Obrigado por esta sugestão. Cheguei a essa pergunta enquanto pesquisava em busca de uma solução. Isso é exatamente o que eu precisava para o meu projeto.
Cheryl Velez
8

JavaScript setTimeouté uma solução muito boa:

function funcx()
   {
   // your code here
   // break out here if needed
   setTimeout(funcx, 3000);
   }

funcx();

A delayfunção no jQuery é usada principalmente para atrasar animações em uma fila de animação do jQuery.

Jay Tomten
fonte
5

delay()não interrompe o fluxo do código e o executa novamente. Não há maneira prática de fazer isso em JavaScript. Tudo precisa ser feito com funções que recebam retornos de chamada, como os setTimeoutque outros mencionaram.

O objetivo do jQuery delay()é fazer com que uma fila de animação aguarde antes de executar. Assim, por exemplo $(element).delay(3000).fadeIn(250);, o elemento desaparecerá após 3 segundos.

Nathan MacInnes
fonte
5

Somente javascript Funcionará sem jQuery 

<!DOCTYPE html>
<html>
    <head>
        <script>
            function sleep(miliseconds) {
                var currentTime = new Date().getTime();
                while (currentTime + miliseconds >= new Date().getTime()) {
                }
            }

            function hello() {
                sleep(5000);
                alert('Hello');
            }
            function hi() {
                sleep(10000);
                alert('Hi');
            }
        </script>
    </head>
    <body>
        <a href="#" onclick="hello();">Say me hello after 5 seconds </a>
        <br>
        <a href="#" onclick="hi();">Say me hi after 10 seconds </a>


    </body>
</html>
Faruk Omar
fonte
1
Fazer loop em javascript é uma má ideia! Toda a funcionalidade do javascript será interrompida enquanto o loop estiver em execução. Isso terá efeitos colaterais imprevistos. É muito melhor usar funções sem bloqueio, como setTimeout ().
Kevin G.
4

Javascript é uma linguagem de programação assíncrona, portanto você não pode parar a execução por um tempo; a única maneira de [pseudo] parar uma execução é usar setTimeout () que não é um atraso, mas um "retorno de chamada de função atrasada".

Fabio Buda
fonte
2

Se você estiver usando os recursos do ES6 e estiver em uma função assíncrona, poderá interromper efetivamente a execução do código por um certo tempo com esta função:

const delay = millis => new Promise((resolve, reject) => {
  setTimeout(_ => resolve(), millis)
});

É assim que você o usa:

await delay(5000);

Ele será interrompido pela quantidade solicitada de milissegundos, mas apenas se você estiver em uma função assíncrona . Exemplo abaixo:

const myFunction = async function() {
  // first code block ...

  await delay(5000);

  // some more code, executed 5 seconds after the first code block finishes
}
Anthony De Smet
fonte