特定のユースケース向けに指定された時間遅延を JavaScript で実装するにはどうすればよいですか?

JavaScript での時間遅延の実装

特定のシナリオでは、ユーザー インターフェイスの強化のためにスクリプトの実行に遅延を追加する必要があります。またはパフォーマンスの最適化。これに関連して、特定のユースケースに対処するために JavaScript に時間遅延を導入する方法を検討します。

ユースケース:

画像の切り替え機能があると仮定します。画像をクリックすると別の画像に切り替わり、再度クリックすると元の画像に戻ります。ユーザー エクスペリエンスを向上させるために、2 番目の画像 (img_onclick.jpg) をクリックした後、最初の画像 (img.jpg) が再表示されるまでに 1 秒の遅延を組み込みます。

解決策:

setTimeout() 関数は、JavaScript に遅延を導入するための多用途のアプローチを提供します。その構文は次のとおりです:

setTimeout(function, milliseconds)

このソリューションでは、setTimeout() を利用して、元の画像 img.jpg に戻る前に 1000 ミリ秒 (1 秒) の遅延を作成します。変更されたコードは次のとおりです:

<code class="javascript">$(".trigger").toggle(function () {
    $(this).addClass("active");
    $(".trigger").find('img').prop('src', 'http://localhost:8888/images/img_onclick.jpg');
}, function () {
    $(this).removeClass("active");
    // Added setTimeout to introduce a delay
    setTimeout(function() {
      $(".trigger").find('img').prop('src', 'http://localhost:8888/images/img.jpg');
    }, 1000); // 1000 milliseconds delay
});</code>

この変更を組み込むことにより、2 番目の画像 (img_onclick.jpg) がクリックされると、スクリプトは効果的に元の画像 (img.jpg) を表示する前に 1 秒待機します。必要に応じて遅延を追加します。

同様の結果を達成する別の方法もありますが、この特定の使用例では、setTimeout() が簡単で効率的なソリューションを提供することに注意してください。

以上が特定のユースケース向けに指定された時間遅延を JavaScript で実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。