JavaScript での時間遅延の実装

Web 開発の領域では、さまざまなイベントのタイミングを制御することは、ユーザーフレンドリーで使いやすいものを作成するために非常に重要です。インタラクティブな体験。一般的な要件の 1 つは、ユーザー入力によってトリガーされる迅速なアクションや反復的なアクションを防ぐために時間遅延を導入することです。

具体的には、JavaScript は時間遅延を実現するための汎用性の高い方法を提供します。提供されたコードの場合のように、画像を操作する場合、setTimeout() 関数を利用して、指定した期間、JavaScript コードの実行を一時停止できます。

コード内で、画像をクリックするとソースが「img_onclick.jpg」に変更され、1000 ミリ秒 (1 秒) の遅延が発生してから「img.jpg」に戻るという切り替え動作を作成することを目的としています。これを実現するには、次のように setTimeout() 関数を導入します。 // 希望の遅延を設定します $(".trigger").click(function() { // 画像の切り替えを処理するコード $(this).next(".toggle-container").slideToggle(); setTimeout(function() { $(this).find('img').prop('src', 'http://localhost:8888/images/img.jpg'); }, ミリ秒単位の遅延); });

var delayInMilliseconds = 1000; // Set the desired delay

$(".trigger").click(function() {
  // Code to handle image toggle
  $(this).next(".toggle-container").slideToggle();
  setTimeout(function() {
    $(this).find('img').prop('src', 'http://localhost:8888/images/img.jpg');
  }, delayInMilliseconds);
});

setTimeout()