在 JavaScript 中實現睡眠功能

  1. 在 JavaScript 中實現無 Promiseasyncawaitsleep() 函式
  2. 在 JavaScript 中用 Promiseasyncawait 實現 sleep() 函式

每個人都知道 JavaScript 程式語言是一種單執行緒語言,這意味著它只有一個呼叫棧和一個堆疊。因此,只能逐行執行 JavaScript 程式碼。但是有時候我們想要執行一些需要花費一些時間才能執行的操作,而在此期間,讓使用者等待結果並不是一個好主意。

假設我們正在執行 API 呼叫;然後,可能需要一些時間才能從伺服器獲得響應。無需等待響應,我們可以在正在進行 API 呼叫的函式之前新增 async 關鍵字,該函式將返回 Promise 物件。這將使該函式非同步,然後在 await 的幫助下,我們將等待一段時間。在這段時間內,我們將嘗試完成其他任務。稍後,一旦我們從伺服器獲得響應,我們就可以返回並顯示 API 呼叫結果。

這樣,我們可以有效地利用 JavaScript 引擎。為此,JavaScript 為我們提供了一個 Promise 物件和一些關鍵字,例如 asyncawaitPromise 是一個事件,它告訴我們請求是已解決還是被拒絕。每當我們請求資源時,就會有兩件事,要麼我們的請求將得到滿足,要麼會被拒絕。使用 async,我們使該函式非同步化。

在 JavaScript 中實現無 Promiseasyncawaitsleep() 函式

首先讓我們看看當我們在程式中不使用 promiseasyncawait 時會發生什麼。下面的程式碼具有 3 個函式- func_1func_2sleep() 函式。執行將從 sleep() 函式開始。當開始執行時,sleep() 函式將呼叫 func_1,但請注意,此處在 func_1 內有一個 setTimeOut() 函式,該函式的超時為 3000 毫秒(3 秒)。現在,func_1 將等待該時間。到那時,將執行其他程式碼行。

const func_1 = () => {
    setTimeout(() => {
        return "one"
    }, 3000);
};

const func_2 = () => {
    return "two"
};

const sleep = () => {
    let first_response = func_1();
    console.log(first_response);

    let second_response = func_2();
    console.log(second_response);
};

sleep();

輸出:

undefined
two

console.log(first_response); 執行後,將列印 undefined。由於 func_1() 當前處於等待狀態,因此 first_response 裡面沒有任何內容。這就是為什麼要列印 undefined 的原因。在 JavaScript 中,存在一個提升的概念,即程式中所有已宣告但未初始化的變數都將被賦予 undefined 的值。這就是我們獲得 undefined 作為輸出的方式。

第二個函式 func_2() 很簡單。在這裡,它將僅返回字串 two,然後將其儲存在變數 second_response 中,然後將其列印在輸出視窗上。

在 JavaScript 中用 Promiseasyncawait 實現 sleep() 函式

在這裡,我們將使用 Promiseasyncawait 並在程式中進行一些小的修改。注意我們如何獲得 func_1() 函式的 undefined 值。因此,讓我們通過使 sleep() 函式與 async 非同步,然後在 await 的幫助下等待或睡眠一段時間,然後以 Promise() 物件的形式獲取響應,該物件由 async 返回。

const func_1 = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("The request is successful.");
        }, 3000);
    });
};

const func_2 = () => {
    return "two"
};

const sleep = async () => {
    let first_response = await func_1();
    console.log(first_response);

    let second_response = func_2();
    console.log(second_response);
};

sleep();

輸出:

The request is successful.
two

僅在函式前面新增關鍵字 async 並不能使該函式非同步。為此,無論你要進行非同步呼叫還是等待,我們都必須在該函式上使用 await,在這種情況下,請使用 func_1()

await 關鍵字寫在函式之前,允許該函式等待一段時間然後執行它。它等待執行該功能的時間取決於 setTimeOut() 函式內部指定的時間。

在函式 func_1 內,我們返回一個帶有兩個引數的 Promise 物件,第一個是 resolve,第二個是 reject。如果成功實現了 Promise,我們可以使用 resolve 方法;否則,我們可以使用 reject 方法。

如果你執行此程式,則將首先呼叫 func_1(),然後由於我們使用了 3000ms 的 setTimeOut(),因此該程式將等待 3 秒鐘。之後,它將返回字串 The request is successful. 作為 func_1 的結果,它將被儲存在 first_response 變數中。func_2() 將被呼叫並直接返回 two 作為結果,然後它將被儲存在 second_response 變數內。這就是我們在 JavaScript 中實現 sleep() 函式的方式。

相關文章 - JavaScript Time

  • 在 JavaScript 中等待 X 秒