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 de tempo específico)?

Existe o seguinte:

 setTimeout(function, milliseconds); 

function que pode ser passada o tempo após o qual a function será executada.

Veja: Window setTimeout() Método .

Apenas para adicionar ao que todos disseram sobre setTimeout : Se você quiser chamar uma function com um parâmetro no futuro, você precisa configurar algumas chamadas de function anônimas.

Você precisa passar a function como um argumento para ela ser chamada mais tarde. Com efeito, isso significa sem colchetes atrás do nome. O seguinte chamará o alerta de uma vez e exibirá “Hello world”:

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

Para corrigir isso, você pode colocar o nome de uma function (como o Flubba fez) ou você pode usar uma function anônima. Se você precisar passar um parâmetro, então você tem que usar uma function anônima.

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

Mas se você executar esse código, você notará que, após 2 segundos, o pop-up dirá “Hello Stack Overflow”. Isso ocorre porque o valor da variável a foi alterado nesses dois segundos. Para dizer “Olá mundo” depois de 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á esperar 2 segundos e depois clicar em “Hello world”.

Apenas para expandir um pouco … Você pode executar código diretamente na chamada setTimeout , mas como @patrick diz, você normalmente atribui uma function de callback, como esta. O tempo é milissegundos

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

Se você realmente quer ter uma function de delay bloqueio (síncrona) (para qualquer), por que não fazer algo assim:

  

Você precisa usar setTimeout e passar uma function de retorno de chamada. A razão que você não pode usar o sono 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!

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

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

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

Não há uma function que possa interromper a execução embutida no JavaScript. No entanto, você pode escrever sua própria function que faz algo como um loop incondicional até que o tempo seja atingido usando a function Date() e adicionando o intervalo de tempo que você precisa.

Se você só precisa testar um atraso, você pode 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 a produção. Mais sobre isso nos comentários

A resposta simples é:

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

A function acima espera por 1 segundo (1000 ms), em seguida, define x para 1. Obviamente, este é um exemplo; você pode fazer o que quiser dentro da function anônima.

por que você não pode colocar o código atrás de uma promise? (typescript 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'); }); 

Eu realmente gostei da explicação de Maurius (resposta mais votada) com os três methods diferentes para chamar setTimeout .

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

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

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

Este não espera pelo timeout – o back () é chamado quase que imediatamente, não importa o número que eu coloquei no delay.

No entanto, alterando 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 dispenso o popup a animação para o CSS continua.

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

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 rasgado em pedaços 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 

Como outro dito, setTimeout é sua aposta mais segura
Mas às vezes você não pode separar a lógica para uma nova function, 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());