Executar script após atraso específico usando JavaScript

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)?

Existe o seguinte:

setTimeout(function, milliseconds);

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

Consulte: Método da janelasetTimeout() .

Apenas para acrescentar ao que todos os outros disseram sobre setTimeout: Se você quiser chamar uma função com um parâmetro no futuro, precisará configurar algumas chamadas de função anônimas.

Você precisa passar a função como argumento para que ela seja chamada posteriormente. Com efeito, isso significa sem colchetes atrás do nome. O seguinte chamará o alerta de uma só vez e exibirá 'Hello world':

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

Para corrigir isso, você pode colocar o nome de uma função (como Flubba fez) ou pode usar uma função anônima. Se você precisar passar um parâmetro, precisará 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 exibirá '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";

Esperará 2 segundos e depois aparecerá 'Hello world'.

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

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

Se você realmente deseja ter uma função de bloqueio (síncrona) delay(por qualquer motivo), 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>

Você precisa usar o setTimeout e passar uma função de retorno de chamada. O motivo pelo qual você não pode usar a suspensão no javascript é porque você impediria 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!

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

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

A setTimeout()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 pausar a execução incorporada ao JavaScript. No entanto, você pode escrever sua própria função que executa algo como um loop incondicional até que o tempo seja alcançado usando a Date()função e adicionando o intervalo de tempo necessário.

Se você só precisa testar um atraso, pode usar o seguinte:

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

E então, se você quiser atrasar por 2 segundos, faça:

delay(2000);

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

por que você não pode colocar o código por trás de uma promessa? (digitado no topo da minha cabeça)

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

A resposta simples é:

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

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

Gostei muito da explicação de Maurius (resposta mais votada) com os três métodos diferentes de chamada setTimeout.

No meu código, desejo navegar automaticamente automaticamente para a página anterior após a conclusão de um evento de salvamento do AJAX. A conclusão do evento de salvamento possui 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 - o back () é chamado quase imediatamente, independentemente do número que eu coloquei para o atraso.

No entanto, altere isso para:

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

Isso faz exatamente o que eu estava esperando.

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

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

Eu tinha alguns comandos ajax que queria executar com um atraso no meio. Aqui está um exemplo simples de uma maneira de fazer isso. Estou preparado para ser rasgado em pedaços, embora para a 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

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

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

função de atraso:

/**
 * delay or pause for some time
 * @param {number} t - time (ms)
 * @return {Promise<*>}
 */
const delay = async t => new Promise(resolve => setTimeout(resolve, t));

uso dentro da asyncfunção:

await delay(1000);

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

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 # date:' +new Date());