[Terjemahan] Melaksanakan Animasi dengan Pendikit dalam JavaScript

Pautan Artikel Asal

---

Melaksanakan Animasi dengan Pendikit dalam JavaScript

Dokumen ini menerangkan cara meningkatkan prestasi animasi menggunakan pendikit dalam JavaScript dan menggunakan pendikit untuk menyelesaikan isu animasi skrol berombak. Ia juga membandingkan perbezaan sebelum dan selepas menggunakan pendikit.

Apa itu Throttle?

Pendikit ialah teknik yang mengehadkan fungsi dipanggil 'paling banyak sekali' dalam 'selang masa tertentu'. Dalam erti kata lain, walaupun sesuatu peristiwa berlaku beberapa kali dalam tempoh yang singkat, fungsi itu hanya akan dilaksanakan sekali dalam selang masa yang ditetapkan oleh pendikit. Contohnya, jika fungsi mempunyai pendikit 100ms, walaupun peristiwa berlaku 10 kali dalam 1 saat, fungsi itu akan dilaksanakan maksimum 10 kali (pada selang 100ms).

Di manakah Pendikit Digunakan?

Pendikit boleh digunakan dalam situasi berikut:

• Menghalang kemerosotan prestasi akibat pencetus peristiwa yang berlebihan: Apabila peristiwa seperti menatal, pergerakan tetikus dan saiz semula tetingkap kerap berlaku dalam tempoh yang singkat, pengendali acara boleh dilaksanakan secara berlebihan, menyebabkan masalah prestasi. Pendikit digunakan untuk mengurangkan perkara ini.
• Menjadikan animasi lebih lancar: Apabila perlu untuk menyatakan perubahan berterusan, seperti animasi tatal, animasi mungkin berombak atau gagap bergantung pada kekerapan acara. Menggunakan pendikit boleh menjadikan animasi lebih lancar.

Masalah: Animasi Tatal Gagap dan Berombak

Percubaan telah dibuat untuk melaksanakan animasi tatal yang lancar mengikut acara roda tatal, tetapi sebelum menggunakan pendikit, animasi itu berombak.

Sebab: Ini kerana peristiwa roda berlaku pada kadar yang sangat tinggi, menyebabkan fungsi window.scrollBy dipanggil secara berlebihan, menghalang penyemak imbas daripada memproses semua permintaan.

Perbandingan

1. Kod Sebelum Menggunakan Pendikit

useEffect(() => {
    const container = scrollContainerRef.current;
    if (!container) return;

    const handleWheel = (event) => {
        event.preventDefault();

        window.scrollBy({
            left: event.deltaY,
            behavior: 'smooth'
        });
    };

    container.addEventListener('wheel', handleWheel);

    return () => {
        container.removeEventListener('wheel', handleWheel);
    };
}, []);

Dalam kod ini, fungsi handleWheel dilaksanakan setiap kali peristiwa roda berlaku. Fungsi ini mengira jumlah tatal menggunakan nilai deltaY acara dan tatal dengan memanggil tetingkap.scrollByfunction. Masalahnya ialah peristiwa roda boleh berlaku beberapa kali dalam tempoh yang sangat singkat, yang menyebabkan window.scrollBy dipanggil secara berlebihan, mengakibatkan animasi berombak.

2. Kod Selepas Menggunakan Pendikit

useEffect(() => {
    const container = scrollContainerRef.current;
    if (!container) return;

    const handleWheel = (event) => {
        event.preventDefault();

        window.scrollBy({
            left: event.deltaY,
            behavior: 'smooth'
        });
    };

    container.addEventListener('wheel', handleWheel);

    return () => {
        container.removeEventListener('wheel', handleWheel);
    };
}, []);

Dalam kod pendikit, pembolehubah ThrottleTimer digunakan untuk mengurus pelaksanaan fungsi. Proses ini berfungsi seperti berikut:

• Apabila fungsi handleWheel dipanggil, ia menyemak sama ada throttleTimer wujud.
• Jika throttleTimer wujud (bermaksud pemasa yang ditetapkan sebelum ini masih aktif), fungsi itu kembali serta-merta. Ini menghalang permintaan tatal baharu daripada diproses semasa animasi tatal sedang dijalankan.
• Jika throttleTimer tidak wujud, event.preventDefault() dipanggil untuk menghalang kelakuan tatal lalai dan setTimeout digunakan untuk melaksanakan fungsi window.scrollBy selepas 16ms.
• Di dalam fungsi panggil balik setTimeout, throttleTimer ditetapkan kepada null, menetapkan semula pendikit dan membenarkan fungsi dipanggil semula selepas kelewatan.

3. Potensi Penambahbaikan

• Kelewatan Awal setTimeout

  setTimeout digunakan untuk melaksanakan mekanisme pendikit. setTimeout melaksanakan fungsi panggil balik selepas kelewatan yang ditentukan (16ms dalam kes ini). Akibatnya, apabila peristiwa roda pertama berlaku, window.scrollBy digunakan selepas kelewatan 16ms. Kelewatan awal ini boleh menyebabkan tanggapan kurang responsif serta-merta, yang berpotensi ditafsirkan sebagai gagap, terutamanya dengan pergerakan roda yang pantas. (Penambahbaikan selanjutnya akan diterokai pada masa hadapan...)

Atas ialah kandungan terperinci [Terjemahan] Melaksanakan Animasi dengan Pendikit dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!