跳過到頁腳內容
NODE 幫助

JavaScript 等待 5 秒(對開發者而言如何運作)

在 JavaScript 中,等待特定時間(例如 5 秒)是常見的需求。 無論你是想延遲某個操作還是模擬載入狀態,了解如何在 JavaScript 中實現延遲對於同步程式碼來說都至關重要。 在本文中,我們將探討在 JavaScript 中等待 5 秒鐘的各種方法,並為每種方法提供暫停 JavaScript 執行的範例。 此外,我們將藉助IronPDF for Node.js,使用非同步函數和設定超時函數來建立 PDF 檔案。

1. 使用 setTimeout()

setTimeout()函數是 JavaScript 內建函數,它會在指定的毫秒延遲後執行指定的函數或程式碼片段。

範例

console.log("Start");

// Schedules a function to be executed after 5000 milliseconds (5 seconds)
setTimeout(() => {
    console.log("Waited for 5 seconds");
}, 5000);

console.log("End");
console.log("Start");

// Schedules a function to be executed after 5000 milliseconds (5 seconds)
setTimeout(() => {
    console.log("Waited for 5 seconds");
}, 5000);

console.log("End");
JAVASCRIPT

在這個範例中, setTimeout()函數內部的程式碼將在延遲 5000 毫秒(或 5 秒)後執行。

JavaScript 等待 5 秒(開發者如何操作):圖 1 - 使用 JavaScript setTimeout() 函數等待 5000 毫秒或 5 秒的控制台輸出。

2. 使用 Promise 和 async/await

您也可以將 Promises 與async/await結合使用,在 JavaScript 中建立延遲,也稱為非同步程式碼。

範例

async function delay() {
    console.log("Start");
    // Creates a promise that resolves after 5000 milliseconds (5 seconds)
    await new Promise(resolve => setTimeout(resolve, 5000));
    console.log("Waited for 5 seconds");
    console.log("End");
}

// Call the async function
delay();
async function delay() {
    console.log("Start");
    // Creates a promise that resolves after 5000 milliseconds (5 seconds)
    await new Promise(resolve => setTimeout(resolve, 5000));
    console.log("Waited for 5 seconds");
    console.log("End");
}

// Call the async function
delay();
JAVASCRIPT

在這個範例中, delay()函數使用async/await透過 Promise 暫停執行 5 秒鐘。

JavaScript 等待 5 秒(開發者如何操作):圖 2 - 使用 JavaScript setTimeout() 函數在 Promise 中非同步運行並等待 5000 毫秒或 5 秒的控制台輸出。

3. 使用 setInterval()

雖然setInterval()函數通常用於重複操作,但您也可以透過在所需時間後清除間隔來使用它來建立一次性延遲。

範例

console.log("Start");

let timer = setInterval(() => {
    console.log("Waited for 5 seconds");
    // Clear the interval after the desired delay
    clearInterval(timer);
}, 5000);

console.log("End");
console.log("Start");

let timer = setInterval(() => {
    console.log("Waited for 5 seconds");
    // Clear the interval after the desired delay
    clearInterval(timer);
}, 5000);

console.log("End");
JAVASCRIPT

在這裡, setInterval()函數每 5 秒重複執行提供的函數,直到我們使用clearInterval()函數清除間隔。

JavaScript 等待 5 秒(開發者如何操作):圖 3 - 使用 JavaScript setInterval() 方法等待 5000 毫秒或 5 秒的控制台輸出。 . 然後使用 clearInterval() 函數清除間隔。

4. 使用 new Promise()

你可以使用new Promise()建立一個在指定延遲後解析的 Promise。

範例

console.log("Start");

// Delay function that returns a promise which resolves after `ms` milliseconds
const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));

// Use the delay function
delay(5000).then(() => {
    console.log("Waited for 5 seconds");
    console.log("End");
});
console.log("Start");

// Delay function that returns a promise which resolves after `ms` milliseconds
const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));

// Use the delay function
delay(5000).then(() => {
    console.log("Waited for 5 seconds");
    console.log("End");
});
JAVASCRIPT

在這個範例中, delay()函數傳回一個 Promise,該 Promise 會在 5 秒後解析,我們使用.then()在延遲後執行程式碼。

JavaScript 等待 5 秒(開發者如何操作):圖 4 - 使用 Promise 和 JavaScript delay() 和 then() 函數等待 5 秒的控制台輸出。

5. IronPDF JS簡介

IronPDF JavaScript Library for PDF Generation提供了一個 JavaScript 程式庫,使開發人員能夠直接從客戶端 JavaScript 操作和產生 PDF 文件。 它提供了一系列功能,可以使用 JavaScript 建立、編輯和轉換 PDF 文件。

安裝 IronPDF JS

要開始使用 IronPDF JS,您需要在專案中包含 IronPDF JavaScript 庫。 你可以透過 CDN 將其加入系統中,也可以直接從 IronPDF 網站下載。

npm install @ironsoftware/ironpdf
npm install @ironsoftware/ironpdf
SHELL

6. 使用 IronPDF 的 JavaScript 等待 5 秒

現在,讓我們看看如何將 JavaScript 程式碼延遲技術與 IronPDF 結合起來,使用非同步 JavaScript 解釋器在等待 5 秒鐘後創建 PDF 文檔,如下面的程式碼片段所示。

程式碼範例

import { PdfDocument } from "@ironsoftware/ironpdf";

(async () => {
    const html = `<html><body><h1>Hello, IronPDF!</h1></body></html>`;
    // Wait for 5 seconds
    await new Promise(resolve => setTimeout(resolve, 5000));
    // Create PDF from the HTML content
    const pdfDocument = await PdfDocument.fromHtml(html);
    // Save the PDF file
    await pdfDocument.saveAs("Waited.pdf");  
    console.log("PDF Created after wait");
})();
import { PdfDocument } from "@ironsoftware/ironpdf";

(async () => {
    const html = `<html><body><h1>Hello, IronPDF!</h1></body></html>`;
    // Wait for 5 seconds
    await new Promise(resolve => setTimeout(resolve, 5000));
    // Create PDF from the HTML content
    const pdfDocument = await PdfDocument.fromHtml(html);
    // Save the PDF file
    await pdfDocument.saveAs("Waited.pdf");  
    console.log("PDF Created after wait");
})();
JAVASCRIPT

在這段程式碼片段中,非同步函數使用async/awaitsetTimeout()等待 5 秒鐘。 延遲之後,它使用 IronPDF 的PdfDocument.fromHtml()方法建立一個新的 PDF 文檔,其中包含簡單的 HTML 內容。 您可以根據自身需求取代 PDF 產生程式碼,或使用產生的 PDF 資料進行進一步處理。

![JavaScript 等待 5 秒(開發者如何操作):圖 5 - 使用 JavaScript setTimeout() 函數並等待 5 秒的控制台輸出。 然後 IronPDF 程式碼運行,將 HTML 字串轉換為 PDF 文檔,並在控制台中顯示訊息"等待後建立 PDF"。

結論

在 JavaScript 中,等待特定時間是開發人員經常遇到的常見任務。 在本文中,我們探討了在 JavaScript 中等待 5 秒的各種方法,包括使用setTimeout() 、帶有async/await 的Promise、 setInterval()new Promise()以及 JavaScript sleep 函數。

此外,我們還引入了IronPDF JS ,用於使用 JavaScript 管理 PDF 文件。 如需更多程式碼範例,請造訪IronPDF Node.js 範例

透過了解這些技術和工具,您可以有效地在 JavaScript 應用程式中實現延遲,並將其用於更複雜的任務,例如產生 PDF 文件或執行非同步操作。 無論你是初學者還是經驗豐富的開發者,紮實掌握這些基礎知識都將提升你的編碼技能,並使你能夠編寫更有效率、更強大的 JavaScript 應用程式。

Curtis Chau
技術撰稿人

Curtis Chau 擁有電腦科學學士學位(卡爾頓大學),專長於前端開發,精通 Node.js、TypeScript、JavaScript 和 React。Curtis 對製作直覺且美觀的使用者介面充滿熱情,他喜歡使用現代化的架構,並製作結構良好且視覺上吸引人的手冊。

除了開發之外,Curtis 對物聯網 (IoT) 也有濃厚的興趣,他喜歡探索整合硬體與軟體的創新方式。在空閒時間,他喜歡玩遊戲和建立 Discord bots,將他對技術的熱愛與創意結合。