フッターコンテンツにスキップ
ノードヘルプ

JavaScript Wait 5 Seconds(開発者向けのしくみ)

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秒間待機したコンソール出力。 ](/static-assets/pdf/blog/javascript-wait-5-seconds/javascript-wait-5-seconds-1.webp)

Promisesとasync/awaitを使用してJavaScriptで遅延を作成することもできます。これは非同期コードとしても知られています。

また、async/awaitとともにPromiseを使用し、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を使用して5秒の間実行を一時停止します、Promiseを使用しています。

3. setInterval()の使用 ](/static-assets/pdf/blog/javascript-wait-5-seconds/javascript-wait-5-seconds-2.webp)

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 Wait 5 Seconds (How It Works For Developers): 図3 - JavaScriptのsetInterval()メソッドを使用したコンソール出力と5000ミリ秒または5秒待っています。 . new Promise()を使用して指定された遅延後に解決されるPromiseを作成できます。

4. new Promise()の使用

JavaScript 5秒待つ方法(開発者向け):図4 - PromiseとJavaScriptのdelay()およびthen()関数を使用し、5秒間待機したコンソール出力。

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()関数は5秒後に解決されるPromiseを返し、私たちは.then()を使用して遅延の後にコードを実行します。

IronPDF JavaScriptライブラリを用いたPDF生成は、クライアントサイドJavaScriptから直接PDF文書を操作および生成するためのJavaScriptライブラリを提供します。

それはJavaScriptを使用してPDFファイルを作成、編集、変換するための多くの機能を提供します。

IronPDFのJavaScriptライブラリはPDF生成のための、開発者がクライアントサイドの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関数がasync/awaitsetTimeout()を使用して5秒間待機します。 遅延の後、IronPDFのPdfDocument.fromHtml()メソッドを使用してシンプルなHTMLコンテンツで新しいPDF文書を作成します。 PDF生成コードを特定の要件に置き換えることも、生成されたPDFデータをさらなる処理のために使用することもできます。

JavaScriptで5秒待つ(開発者向けの動作方法): 図 5 - JavaScriptのsetTimeout()関数を使用したコンソール出力および5秒間待機。 その後、IronPDFのコードが実行され、HTML文字列をPDFドキュメントに変換し、コンソールにPDF Created after waitというメッセージを表示します。

結論

JavaScriptで特定の期間待機することは、開発者が頻繁に遭遇する一般的な作業です。 この記事では、setTimeout()async/await を使用した Promise、setInterval()new Promise() および JavaScript のスリープ関数を含む、JavaScript で 5 秒間待機するさまざまな方法について説明します。

さらに、JavaScript を使用して PDF ファイルを管理するためのIronPDF JSを紹介しました。 さらなるコード例については、IronPDF Node.js の例を訪れてください。

これらのテクニックやツールを理解することで、JavaScriptアプリケーションに遅延を効果的に実装したり、PDFドキュメントの生成や非同期処理の実行など、より複雑なタスクに活用することができます。 初心者であろうと経験豊富な開発者であろうと、これらの基礎知識をしっかりと把握することで、コーディングスキルが向上し、より効率的で堅牢なJavaScriptアプリケーションを書くことができるようになります。

Darrius Serrant
フルスタックソフトウェアエンジニア(WebOps)

Darrius Serrantは、マイアミ大学でコンピュータサイエンスの学士号を取得し、Iron SoftwareでフルスタックWebOpsマーケティングエンジニアとして働いています。若い頃からコーディングに惹かれ、コンピューティングを神秘的かつアクセス可能なものとし、創造性と問題解決のための完璧な媒体と考えていました。

Iron Softwareでは、新しいものを創造することと、複雑なコンセプトをより理解しやすくすることを楽しんでいます。Resident Developerの一人として、次世代に専門知識を共有するために、学生を教えることにも志願しました。

Darriusにとって、その仕事は価値があり、実際の影響があるため、満足感があります。