Kaedah untuk menghalang pencetusan frekuensi tinggi dan panggilan frekuensi tinggi fungsi acara dalam kemahiran JavaScript_javascript

Fungsi JavaScript yang paling asas dalam halaman web adalah untuk memantau atau bertindak balas terhadap tindakan pengguna, yang sangat berguna. Sesetengah tindakan pengguna adalah sangat kerap, dan sesetengahnya sangat jarang berlaku. Sesetengah fungsi pendengar melaksanakan sepantas kilat, manakala yang lain berat tangan dan boleh menyeret penyemak imbas hingga mati. Ambil peristiwa ubah saiz tetingkap penyemak imbas sebagai contoh Peristiwa ini akan dicetuskan sekali untuk setiap perubahan skala dalam saiz tetingkap penyemak imbas Jika pendengar besar, penyemak imbas anda tidak lama lagi.

Jelas sekali, kami tidak boleh membenarkan penyemak imbas diturunkan, tetapi kami tidak boleh memadamkan pendengar padam. Walau bagaimanapun, kita boleh mengehadkan kekerapan panggilan fungsi dan melemahkan kesan pelaksanaan fungsi acara. Daripada mencetuskan fungsi pendengar sekali untuk setiap perubahan saiz tetingkap, kami kini boleh menetapkan selang minimum untuk mencetuskan fungsi pendengar menjadi lebih besar daripada bilangan milisaat tertentu, supaya ia mengekalkan saluran panggilan yang munasabah dan memastikan pengguna pengalaman tidak musnah. Terdapat perpustakaan alat js yang baik dipanggil Underscore.js, yang mempunyai kaedah mudah yang membolehkan anda mencipta pendengar dengan mudah yang mengurangkan kekerapan pencetus fungsi acara.

Kod JavaScript

Kod pendengar pengurangan kekerapan adalah sangat mudah:

Salin kod Kod adalah seperti berikut:

//Buat pendengar
var updateLayout = _.debounce(fungsi(e) {

// Adakah semua reka letak dikemas kini di sini

}, 500); // Jalankan setiap 500 milisaat sekurang-kurangnya

// Tambahkan pendengar acara
window.addEventListener("resize", updateLayout, false);
...Lapisan bawah kod Underscore.js ini sebenarnya menggunakan selang untuk menyemak kekerapan panggilan fungsi acara:

// Mengembalikan fungsi, yang, selagi ia terus digunakan, tidak akan
// dicetuskan. Fungsi akan dipanggil selepas ia berhenti dipanggil untuk
// N milisaat Jika `segera` dilalui, cetuskan fungsi pada
// kelebihan utama, bukannya mengekori.
_.debounce = fungsi(func, wait, immediate) {
var tamat masa;
kembalikan fungsi() {
konteks var = ini, args = hujah;
var later = function() {
tamat masa = null;
Jika (!segera) func.apply(context, args);
};
var callNow = segera && !tamat masa;
clearTimeout(timeout);
tamat masa = setMasa tamat(nanti, tunggu);
if (callNow) func.apply(context, args);
};
};

Kod ini tidak terlalu rumit, tetapi ia adalah satu rahmat untuk tidak perlu menulisnya sendiri. Fungsi nyahpantul ini tidak bergantung pada fungsi Underscore.js yang lain, jadi anda boleh menambahkan kaedah ini pada pustaka alat js kegemaran anda, seperti jQuery atau MooTools, dengan sangat mudah:

Salin kod Kod adalah seperti berikut:

// MooTools
Function.implement({
debounce: function(tunggu, segera) {
var tamat masa,
       fungsi = ini;
kembalikan fungsi() {
konteks var = ini, args = hujah;
var later = function() {
Tamat masa = null;
Jika (!segera) func.apply(context, args);
};
var callNow = segera && !tamat masa;
ClearTimeout(masa tamat);
Tamat masa = setMasa tamat(nanti, tunggu);
Jika (callNow) func.apply(context, args);
};
}
});

// Gunakannya!
window.addEvent("resize", myFn.debounce(500));

Seperti yang dinyatakan di atas, acara ubah saiz tetingkap adalah tempat yang paling biasa untuk menggunakan operasi pengurangan kekerapan Satu lagi tempat biasa ialah memberikan gesaan penyiapan automatik berdasarkan input utama pengguna. Saya suka mengumpul coretan kod seperti ini yang boleh menjadikan tapak web anda lebih cekap dengan mudah. Anda juga disyorkan untuk mempelajari Underscore.js, yang menyediakan sejumlah besar fungsi yang sangat berguna.