Cara Membuat Kelewatan Masa dalam JavaScript untuk Berbasikal Imej: Contoh Praktikal

Cara Melaksanakan Kelewatan Masa dalam JavaScript

Sebagai pembangun web, selalunya perlu untuk memasukkan kelewatan masa ke dalam kod anda untuk pelbagai tujuan. Satu senario sedemikian melibatkan penukaran antara imej di tapak web anda, di mana anda mahu kelewatan antara klik untuk menghalang kitaran imej yang pantas.

Dalam kes khusus ini, anda menyasarkan untuk melaksanakan kelewatan 1000ms (1 saat) selepas mengklik imej untuk mempamerkan img_onclick.jpg, diikuti dengan kelewatan sebelum kembali ke img.jpg selepas klik kedua. Untuk mencapai matlamat ini, pertimbangkan untuk menggunakan fungsi setTimeout() JavaScript.

Penyelesaian Menggunakan 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>

Dalam penyelesaian ini, kami menggunakan setTimeout() untuk menjadualkan fungsi panggil balik yang bertukar kembali kepada img.jpg selepas kelewatan 1000ms.

Penyelesaian Alternatif Tanpa setTimeout()

Walaupun setTimeout() ialah pendekatan biasa, perlu dinyatakan bahawa terdapat penyelesaian lain yang melibatkan penggunaan Gelung Acara JavaScript dan binaan async/menunggu. Walau bagaimanapun, pendekatan ini lebih kompleks dan berada di luar skop perbincangan ini. Untuk rujukan, anda boleh mendapatkan maklumat lanjut tentang alternatif ini dalam soalan yang disediakan di bawah bahagian "Jika anda mahu melakukannya tanpa setTimeout".

Atas ialah kandungan terperinci Cara Membuat Kelewatan Masa dalam JavaScript untuk Berbasikal Imej: Contoh Praktikal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!