JavaScript で画像循環のための時間遅延を作成する方法: 実践的な例

JavaScript で時間遅延を実装する方法

Web 開発者として、さまざまな目的でコードに時間遅延を組み込むことが必要になることがよくあります。このようなシナリオの 1 つは、Web サイト上の画像の切り替えに関するもので、画像の急速な循環を防ぐためにクリック間の遅延が必要な場合です。

この特定のケースでは、クリック後に 1000 ミリ秒 (1 秒) の遅延を実装することを目指します。画像を img_onclick.jpg に変換し、2 回目のクリックで img.jpg に戻るまでの遅延が続きます。これを実現するには、JavaScript の setTimeout() 関数の使用を検討してください。

setTimeout() を使用した解決策

<code class="javascript">var delayInMilliseconds = 1000; //1 second

$(".trigger").click(function () {
    $(this).next(".toggle-container").slideToggle();
    
    // Schedule a callback to switch back to img.jpg after 1 second
    setTimeout(function() {
        $(".trigger").find('img').prop('src', 'http://localhost:8888/images/img.jpg');
    }, delayInMilliseconds);
});</code>

この解決策では、 setTimeout() は、1000 ミリ秒の遅延後に img.jpg に戻るコールバック関数をスケジュールします。

setTimeout() を使用しない代替ソリューション

setTimeout() は一般的なアプローチですが、JavaScript イベント ループと async/await コンストラクトの使用を伴う別の解決策があることに言及する価値があります。ただし、このアプローチはより複雑であり、この説明の範囲外です。参考までに、この代替方法の詳細については、「setTimeout を使用せずに実行したい場合」セクションにある質問で確認できます。

以上がJavaScript で画像循環のための時間遅延を作成する方法: 実践的な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。