在執行下一行之前等待 5 秒

Question

下面的這個 function 並沒有像我想要的那樣工作； 作為一個 JS 新手，我不明白為什么。

我需要它等待 5 秒，然后再檢查newState是否為-1 。

目前，它不會等待，它會立即檢查。

function stateChange(newState) {
  setTimeout('', 5000);

  if(newState == -1) {
    alert('VIDEO HAS STOPPED');
  }
}

Answer 1

您必須將代碼放入提供給setTimeout的回調函數中：

function stateChange(newState) {
    setTimeout(function () {
        if (newState == -1) {
            alert('VIDEO HAS STOPPED');
        }
    }, 5000);
}

任何其他代碼將立即執行。

Answer 2

瀏覽器

這是使用新的async/await語法的解決方案。

請務必檢查瀏覽器支持，因為這是 ECMAScript 6 引入的語言功能。

實用功能：

const delay = ms => new Promise(res => setTimeout(res, ms));

用法：

const yourFunction = async () => {
  await delay(5000);
  console.log("Waited 5s");

  await delay(5000);
  console.log("Waited an additional 5s");
};

這種方法的優點是它使您的代碼看起來和行為像同步代碼。

節點.js

Node.js 16 提供了基於 promise 的內置setTimeout版本，因此我們不必創建自己的實用程序函數：

import { setTimeout } from "timers/promises";

const yourFunction = async () => {
  await setTimeout(5000);
  console.log("Waited 5s");

  await setTimeout(5000);
  console.log("Waited an additional 5s");
};

⚠️ 僅作記錄，您可能很想使用等待函數來規避競爭條件（例如，在測試異步代碼時）。 這很少是一個好主意。

Answer 3

您真的不應該這樣做，正確使用 timeout 是解決 OP 問題以及您只想在一段時間后運行某些東西的任何其他場合的正確工具。 Joseph Silber 在他的回答中很好地證明了這一點。 但是，如果在某些非生產情況下，您確實想將主線程掛起一段時間，則可以這樣做。

function wait(ms){
   var start = new Date().getTime();
   var end = start;
   while(end < start + ms) {
     end = new Date().getTime();
  }
}

以以下形式執行：

console.log('before');
wait(7000);  //7 seconds in milliseconds
console.log('after');

我來到這里是因為我正在構建一個簡單的測試用例，用於圍繞長時間運行的阻塞操作（即昂貴的 DOM 操作）對混合異步操作進行排序，這是我模擬的阻塞操作。 它很適合這份工作，所以我想我把它發布給其他有類似用例的人。 即便如此，它還是在 while 循環中創建了一個 Date() 對象，如果它運行的時間足夠長，它可能會使 GC 不堪重負。 但我怎么強調都不過分，這僅適用於測試，對於構建任何實際功能，您應該參考 Joseph Silber 的回答。

Answer 4

如果你在一個異步函數中，你可以簡單地在一行中完成：

console.log(1);
await new Promise(resolve => setTimeout(resolve, 3000)); // 3 sec
console.log(2);

僅供參考，如果目標是 NodeJS，您可以根據需要使用它（這是一個預定義的承諾 setTimeout 函數）：

await setTimeout[Object.getOwnPropertySymbols(setTimeout)[0]](3000) // 3 sec

Answer 5

使用這樣的延遲函數：

var delay = ( function() {
    var timer = 0;
    return function(callback, ms) {
        clearTimeout (timer);
        timer = setTimeout(callback, ms);
    };
})();

用法：

delay(function(){
    // do stuff
}, 5000 ); // end delay

致謝：如何延遲 .keyup() 處理程序，直到用戶停止輸入？

Answer 6

您不應該只是嘗試在 javascript 中暫停 5 秒。 它不是那樣工作的。 您可以安排一個代碼函數在 5 秒后運行，但是您必須將稍后要運行的代碼放入一個函數中，該函數之后的其余代碼將繼續立即運行。

例如：

function stateChange(newState) {
    setTimeout(function(){
        if(newState == -1){alert('VIDEO HAS STOPPED');}
    }, 5000);
}

但是，如果你有這樣的代碼：

stateChange(-1);
console.log("Hello");

console.log()語句將立即運行。 它不會等到stateChange()函數中的超時觸發之后。 您不能只暫停 JavaScript 執行一段預定的時間。

相反，您想要運行延遲的任何代碼都必須在setTimeout()回調函數內（或從該函數調用）。

如果您確實嘗試通過循環“暫停”，那么您實際上會“掛起”Javascript 解釋器一段時間。 因為 Javascript 僅在單個線程中運行您的代碼，所以當您循環時，沒有其他任何東西可以運行（沒有其他事件處理程序可以被調用）。 因此，循環等待某個變量更改將永遠不會起作用，因為沒有其他代碼可以運行來更改該變量。

Answer 7

該解決方案來自React Native 的刷新控制文檔：

function wait(timeout) {
    return new Promise(resolve => {
        setTimeout(resolve, timeout);
    });
}

要將其應用於 OP 的問題，您可以將此功能與await配合使用：

await wait(5000);
if (newState == -1) {
    alert('Done');
}

Answer 8

setTimeout(function() {
     $('.message').hide();
}, 5000);

這將在 5 秒后隱藏 '.message' div。

Answer 9

嘗試這個：

//the code will execute in 1 3 5 7 9 seconds later
function exec() {
    for(var i=0;i<5;i++) {
        setTimeout(function() {
            console.log(new Date());   //It's you code
        },(i+i+1)*1000);
    }
}

Answer 10

創建這樣一個等待毫秒的函數的最佳方法，此函數將等待參數中提供的毫秒數：

 function waitSeconds(iMilliSeconds) { var counter= 0 , start = new Date().getTime() , end = 0; while (counter < iMilliSeconds) { end = new Date().getTime(); counter = end - start; } }

Answer 11

根據 Joseph Silber 的回答，我會這樣做，更通用一點。

您將擁有您的功能（讓我們根據問題創建一個）：

function videoStopped(newState){
   if (newState == -1) {
       alert('VIDEO HAS STOPPED');
   }
}

你可以有一個等待功能：

function wait(milliseconds, foo, arg){
    setTimeout(function () {
        foo(arg); // will be executed after the specified time
    }, milliseconds);
}

最后，您將擁有：

wait(5000, videoStopped, newState);

這是一個解決方案，我寧願不在等待函數中使用參數（只有foo();而不是foo(arg); ），但這是示例。

Answer 12

您可以通過對函數（ async 和 await ）進行小的更改來增加延遲。

const addNSecondsDelay = (n) => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve();
    }, n * 1000);
  });
}

const asyncFunctionCall = async () {

  console.log("stpe-1"); 
  await addNSecondsDelay(5);
  console.log("step-2 after 5 seconds delay"); 

}

asyncFunctionCall();

Answer 13

如果你有一個異步函數，你可以這樣做：

await new Promise(resolve => setTimeout(resolve, 5000));

Answer 14

使用 angularjs：

$timeout(function(){
if(yourvariable===-1){
doSomeThingAfter5Seconds();
}
},5000)

Answer 15

我用它從 Edge 或 IE 運行 PC 游戲。 並且兩個 self 在 7 秒后關閉。

Firefox 和 Google Chrome 不能以這種方式啟動游戲。

    <html>
    <body>
    <a href="E:\game\game.exe" name="game" onmouseout="waitclose(7000);"> game
    <img src="game.jpg" width="100%" height="97%" ></a>
    <script>
    function waitclose(ms){
     var start = new Date().getTime();var end=start;
     while(end < start + ms) {end = new Date().getTime();}
    window.open('', '_self', ''); window.close();
    }
    </script>
    </body>
    </html>

Answer 16

創建新的 Js 函數

function sleep(delay) {
        var start = new Date().getTime();
        while (new Date().getTime() < start + delay);
      }

當您想延遲執行時調用該函數。 在 int 中使用毫秒作為延遲值。

####Some code
 sleep(1000);
####Next line