Bagaimanakah Saya Boleh Mengesan Apabila Pengguna Berhenti Menatal Menggunakan jQuery?

Peristiwa Tatal jQuery untuk Mengesan Apabila Pengguna Berhenti Menatal

Acara tatal() jQuery berguna untuk mengesan apabila pengguna sedang menatal. Walau bagaimanapun, untuk senario tertentu, ia juga perlu mengetahui apabila penatalan telah berhenti.

Penyelesaian:

Untuk mencapai ini, kita boleh menggunakan gabungan tatal( ), clearTimeout(), dan setTimeout().

$(window).scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
        console.log("Haven't scrolled in 250ms!");
    }, 250));
});

Begini caranya berfungsi:

1. Daftarkan pengendali acara tatal() pada tetingkap.
2. Di dalam pengendali, kosongkan sebarang pemasa tatal sedia ada (clearTimeout()).
3. Tetapkan pemasa tatal baharu menggunakan setTimeout() dengan kelewatan (cth., 250ms).
4. Jika tatal acara dicetuskan sebelum pemasa tamat tempoh, pemasa sedia ada dikosongkan (clearTimeout()) dan pemasa baharu ditetapkan.
5. Jika pemasa tamat tempoh tanpa sebarang acara tatal, ini bermakna pengguna telah berhenti menatal.

Peningkatan Menggunakan Sambungan jQuery:

Pendekatan alternatif ialah untuk menggunakan sambungan jQuery yang dipanggil "jQuery.unevent.js":

$(window).on('scroll', function(e) {
    console.log(e.type + '-event was 250ms not triggered');
}, 250);

Dengan memberikan kelewatan sebagai parameter terakhir kepada kaedah on(), kami boleh menentukan selang minimum antara pencetus peristiwa.

Faedah Pendekatan Ini:

• Ia memberikan yang bersih dan cara ringkas untuk mengendalikan pemberhentian acara menatal.
• Kelewatan boleh dilaraskan agar sepadan dengan keperluan aplikasi.
• Ia boleh digunakan untuk mencetuskan tindakan apabila penatalan telah berhenti, seperti memulihkan kesan ketelusan atau mengalih keluar elemen persinggahan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengesan Apabila Pengguna Berhenti Menatal Menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!