jQueryで5秒間待機する方法：setTimeout、Deferred、アニメーションなど

2024-04-02

jQueryで5秒間待機する方法

setTimeout() 関数を使う

$(function() {
  // 5秒後に実行する処理
  setTimeout(function() {
    // ここに処理内容を記述
  }, 5000);
});

このコードは、setTimeout() 関数を使って、5秒後にfunction() 内の処理を実行します。5000 はミリ秒単位で時間を表し、5000ミリ秒は5秒に相当します。

$.Deferred() オブジェクトを使う

$(function() {
  // Deferredオブジェクトを作成
  var deferred = $.Deferred();

  // 5秒後に解決されるDeferredオブジェクトを生成
  var promise = deferred.promise({
    timeout: 5000
  });

  // Deferredオブジェクトが解決された時に実行する処理
  promise.then(function() {
    // ここに処理内容を記述
  });
});

このコードは、$.Deferred() オブジェクトを使って、5秒後に解決されるpromise オブジェクトを生成します。promise オブジェクトが解決された時に、then() メソッド内の処理が実行されます。

処理内容が単純な場合は、setTimeout() 関数を使う方が簡単です。
処理内容が複雑な場合や、処理の完了後に別の処理を実行したい場合は、$.Deferred() オブジェクトを使う方が便利です。

上記のコードは、基本的な例です。必要に応じて、オプションやコールバック関数などを追加することができます。
jQueryには、他にも様々な方法で待機処理を行うことができます。詳細は、jQueryの公式ドキュメントを参照してください。

setTimeout() 関数を使う

$(function() {
  // 5秒後にメッセージを表示
  setTimeout(function() {
    alert("5秒間待機しました");
  }, 5000);
});

$.Deferred() オブジェクトを使う

$(function() {
  // Deferredオブジェクトを作成
  var deferred = $.Deferred();

  // 5秒後に解決されるDeferredオブジェクトを生成
  var promise = deferred.promise({
    timeout: 5000
  });

  // Deferredオブジェクトが解決された時にメッセージを表示
  promise.then(function() {
    alert("5秒間待機しました");
  });
});

実行方法

上記のコードをHTMLファイルに記述し、ブラウザで開きます。

動作確認

ブラウザでページを開くと、5秒後にメッセージが表示されます。

jQueryで5秒間待機する他の方法

setInterval() 関数を使う

$(function() {
  // 100ミリ秒間隔で現在時刻を表示
  var intervalId = setInterval(function() {
    $("#time").text(new Date().toLocaleString());
  }, 100);

  // 5秒後にclearInterval()で停止
  setTimeout(function() {
    clearInterval(intervalId);
  }, 5000);
});

jQueryのアニメーションを使う

$(function() {
  // 5秒間かけて要素をフェードアウト
  $("#element").fadeOut(5000);
});

このコードは、jQueryのアニメーションを使って、5秒間かけて要素をフェードアウトします。

JavaScriptのPromiseを使う

$(function() {
  // 5秒後に解決されるPromiseオブジェクトを生成
  var promise = new Promise(function(resolve) {
    setTimeout(resolve, 5000);
  });

  // Promiseオブジェクトが解決された時に処理を実行
  promise.then(function() {
    // ここに処理内容を記述
  });
});