Execute o script após um atraso específico usando JavaScript

Question

Existe algum método JavaScript semelhante ao jQuery delay() ou wait() (para atrasar a execução de um script por um período específico)?

Answer 1

Existe o seguinte:

setTimeout(function, milliseconds);

função que pode ser passada o tempo após o qual a função será executada.

Ver: Janela setTimeout() Método.

Answer 2

Só para acrescentar ao que todo mundo disse sobre setTimeout:Se quiser chamar uma função com um parâmetro no futuro, você precisará configurar algumas chamadas de função anônimas.

Você precisa passar a função como argumento para que ela seja chamada posteriormente.Na verdade, isso significa sem colchetes atrás do nome.O seguinte chamará o alerta imediatamente e exibirá 'Olá, mundo':

var a = "world";
setTimeout(alert("Hello " + a), 2000);

Para corrigir isso você pode colocar o nome de uma função (como o Flubba fez) ou pode usar uma função anônima.Se você precisar passar um parâmetro, deverá usar uma função anônima.

var a = "world";
setTimeout(function(){alert("Hello " + a)}, 2000);
a = "Stack Overflow";

Mas se você executar esse código, notará que após 2 segundos o pop-up dirá 'Hello Stack Overflow'.Isso ocorre porque o valor da variável a mudou nesses dois segundos.Para dizer 'Olá, mundo' após dois segundos, você precisa usar o seguinte trecho de código:

function callback(a){
    return function(){
        alert("Hello " + a);
    }
}
var a = "world";
setTimeout(callback(a), 2000);
a = "Stack Overflow";

Ele irá aguardar 2 segundos e então aparecerá 'Olá mundo'.

Answer 3

Só para expandir um pouco...Você pode executar o código diretamente no setTimeout ligue, mas como @patrick diz, você normalmente atribui uma função de retorno de chamada, como esta.O tempo é milissegundos

setTimeout(func, 4000);
function func() {
    alert('Do stuff here');
}

Answer 4

Se você realmente deseja ter um bloqueio (síncrono) delay função (para qualquer coisa), por que não fazer algo assim:

<script type="text/javascript">
    function delay(ms) {
        var cur_d = new Date();
        var cur_ticks = cur_d.getTime();
        var ms_passed = 0;
        while(ms_passed < ms) {
            var d = new Date();  // Possible memory leak?
            var ticks = d.getTime();
            ms_passed = ticks - cur_ticks;
            // d = null;  // Prevent memory leak?
        }
    }

    alert("2 sec delay")
    delay(2000);
    alert("done ... 500 ms delay")
    delay(500);
    alert("done");
</script>

Answer 5

Você precisa usar setTimeout e passe uma função de retorno de chamada.A razão pela qual você não pode usar sleep em javascript é porque você bloquearia a página inteira de fazer qualquer coisa nesse meio tempo.Não é um bom plano.Use o modelo de evento do Javascript e fique feliz.Não lute contra isso!

Answer 6

Você também pode usar window.setInterval() para executar algum código repetidamente em intervalos regulares.

Answer 7

Para complementar os comentários anteriores, gostaria de dizer o seguinte:

O setTimeout() A função em JavaScript não pausa a execução do script em si, mas apenas informa ao compilador para executar o código em algum momento no futuro.

Não existe uma função que possa realmente pausar a execução incorporada ao JavaScript.No entanto, você pode escrever sua própria função que faça algo como um loop incondicional até que o tempo seja atingido usando o comando Date() função e adicionando o intervalo de tempo necessário.

Answer 8

Se você precisar apenas testar um atraso, poderá usar isto:

function delay(ms) {
   ms += new Date().getTime();
   while (new Date() < ms){}
}

E então se você quiser atrasar por 2 segundos você faz:

delay(2000);

Pode não ser o melhor para produção.Mais sobre isso nos comentários

Answer 9

por que você não pode colocar o código atrás de uma promessa?(digitei em cima da minha cabeça)

new Promise(function(resolve, reject) {
  setTimeout(resolve, 2000);
}).then(function() {
  console.log('do whatever you wanted to hold off on');
});

Answer 10

A resposta simples é:

setTimeout(
    function () {
        x = 1;
    }, 1000);

A função acima espera 1 segundo (1000 ms) e então define x como 1.Obviamente este é um exemplo;você pode fazer o que quiser dentro da função anônima.

Answer 11

Eu realmente gostei da explicação do Maurius (resposta com maior votação) com os três métodos diferentes para chamar setTimeout.

No meu código, quero navegar automaticamente para a página anterior após a conclusão de um evento de salvamento AJAX.A conclusão do evento save apresenta uma leve animação no CSS indicando que o salvamento foi bem-sucedido.

No meu código encontrei uma diferença entre os dois primeiros exemplos:

setTimeout(window.history.back(), 3000);

Este não espera pelo tempo limite - back() é chamado quase imediatamente, não importa o número que eu coloquei para o atraso.

No entanto, alterando isso para:

setTimeout(function() {window.history.back()}, 3000);

Isso faz exatamente o que eu esperava.

Isso não é específico da operação back(), o mesmo acontece com alert().Basicamente com o alert() usado no primeiro caso, o tempo de atraso é ignorado.Quando descarto o pop-up, a animação do CSS continua.

Portanto, eu recomendaria o segundo ou terceiro método que ele descreve, mesmo se você estiver usando funções integradas e não argumentos.

Answer 12

Eu tinha alguns comandos ajax que queria executar com um atraso entre eles.Aqui está um exemplo simples de uma maneira de fazer isso.Estou preparado para ser feito em pedaços por minha abordagem não convencional.:)

//  Show current seconds and milliseconds
//  (I know there are other ways, I was aiming for minimal code
//  and fixed width.)
function secs()
{
    var s = Date.now() + ""; s = s.substr(s.length - 5);
  return s.substr(0, 2) + "." + s.substr(2);
}

//  Log we're loading
console.log("Loading: " + secs());

//  Create a list of commands to execute
var cmds = 
[
    function() { console.log("A: " + secs()); },
    function() { console.log("B: " + secs()); },
    function() { console.log("C: " + secs()); },
    function() { console.log("D: " + secs()); },
    function() { console.log("E: " + secs()); },
  function() { console.log("done: " + secs()); }
];

//  Run each command with a second delay in between
var ms = 1000;
cmds.forEach(function(cmd, i)
{
    setTimeout(cmd, ms * i);
});

// Log we've loaded (probably logged before first command)
console.log("Loaded: " + secs());

Você pode copiar o bloco de código e colá-lo em uma janela do console e ver algo como:

Loading: 03.077
Loaded: 03.078
A: 03.079
B: 04.075
C: 05.075
D: 06.075
E: 07.076
done: 08.076

Answer 13

A solução mais simples para chamar sua função com atraso é:

function executeWithDelay(anotherFunction) {
    setTimeout(anotherFunction, delayInMilliseconds);
}

Answer 14

Como já foi dito, setTimeout é sua aposta mais segura
Mas às vezes você não pode separar a lógica para uma nova função, então você pode usar Date.now() para obter milissegundos e fazer o atraso você mesmo....

function delay(milisecondDelay) {
   milisecondDelay += Date.now();
   while(Date.now() < milisecondDelay){}
}

alert('Ill be back in 5 sec after you click ok....');
delay(5000);
alert('im back ' +new Date());