Beberapa perhitungan dan pemrosesan di browser jauh lebih mahal daripada yang lain. Misalnya, operasi DOM membutuhkan lebih banyak memori dan waktu CPU daripada interaksi non-DOM. Mencoba melakukan terlalu banyak operasi terkait DOM secara berurutan dapat menyebabkan browser menggantung dan kadang-kadang bahkan jatuh. Ini mudah terjadi terutama saat menggunakan event handler onressize di IE. Ketika browser diubah ukurannya, acara dipicu terus menerus. Jika Anda mencoba melakukan operasi DOM di dalam event handler onResize, perubahan frekuensi tinggi mungkin merusak browser.
Ide dasar di balik pelambatan fungsi adalah bahwa kode tertentu tidak dapat dieksekusi berulang kali tanpa gangguan. Pertama kali fungsi disebut, timer dibuat, dan kode dijalankan setelah interval waktu yang ditentukan. Ketika fungsi disebut timer kedua, itu membersihkan timer sebelumnya dan menetapkan yang lain. Jika timer sebelumnya telah dieksekusi, operasi ini tidak memiliki arti. Namun, jika timer sebelumnya belum dieksekusi, itu sebenarnya diganti dengan timer baru. Tujuannya adalah untuk mengeksekusi hanya setelah permintaan untuk menjalankan fungsi telah dihentikan untuk jangka waktu tertentu.
fungsi throttle (metode, konteks) {clearTimeout (method.tid); method.tid = setTimeout (function () {Method.call (konteks);}, 100); }Contoh aplikasi:
Dengan asumsi bahwa ada elemen <Div /> yang perlu menjaga tingginya selalu sama dengan lebarnya, itu dapat dikodekan sebagai berikut:
function resizeSiV () {var div = document.geteLementById ("myDiv"); div.style.height = div.OffsetWidth + "px"; } window.onresize = function () {throttle (resizeiv); }Di sini, fungsi mengubah ukuran dimasukkan ke dalam fungsi terpisah yang disebut ressizeiv, dan event handler yang diinesize panggilan throttle () dan lulus dalam fungsi pengubah Ulang alih -alih memanggil ressizeV () secara langsung. Dalam kebanyakan kasus, pengguna tidak dapat merasakan perubahan, meskipun perhitungan yang disimpan ke browser mungkin sangat besar.
Di bawah ini adalah penambahan dari netizen lainnya
Hari ini, kami terutama menulis tentang fungsi mencekik yang kami butuhkan dalam pekerjaan sehari -hari kami. Beberapa teman mungkin tidak menyadari fungsi pelambatan. Bahkan, dalam pekerjaan, banyak skenario mengharuskan kita untuk throttp: //www.sub.com. Yang paling umum adalah ubah ukuran layar, dan acara sentuh atau gulir. Saya tidak tahu apakah saya telah membaca artikel yang saya tulis sebelumnya! JQuery menentukan arah geser bilah gulir halaman dan TouchMove. Ketika Anda menggunakan contoh -contoh ini, Anda akan menemukan bahwa halaman tersebut terus memicu TouchMove atau gulir karena tidak perlu mengecat ulang halaman, jadi saya tidak menggunakan fungsi JavaScript untuk melukai di sini. Namun, ketika kami menggunakan window.onresise, acara mengubah ukuran akan dipicu terus menerus! Ini akan terkait dengan masalah pengecatan ulang halaman. Karena itu, saat mengubah ukuran jendela, kami sarankan Anda menggunakan Function Throttling!
Pengantar pelambatan fungsi JavaScript
Jika Anda merasa kewalahan dengan sepotong besar teks pada saya, itu tidak masalah. Saya akan memberi Anda contoh singkat untuk mengilustrasikan fungsi yang melambung di sini! Misalnya saat kami menggunakan
$ (window) .resize (function () {console.log ("Window haorooms mengubah ukuran");})Anda akan menemukan:
Ini akan menjadi output berkali -kali di sini. Kami cukup mempersempit jendela dan itu akan terus memicu!
Dengan cara ini, ketika div sering digunakan, halaman akan digambar ulang secara terus menerus. Jika Anda menemukan IE dengan versi yang relatif rendah, browser mungkin macet! Untuk menghindari ini, kita dapat menggunakan metode pelambatan fungsi. Ide dasarnya adalah: ketika fungsi dipanggil untuk pertama kalinya, kami membuat timer, menjalankan kode setelah interval waktu yang ditentukan, dan ketika kedua kalinya dipanggil, kami akan dengan jelas memahami timer sebelumnya dan mengatur ulang satu. Jika timer sebelumnya telah dieksekusi, maka operasi ini tidak disengaja. Jika timer belum dieksekusi, itu akan diganti dengan timer baru. Tujuannya adalah untuk menjalankan fungsi setelah dihentikan untuk jangka waktu tertentu.
Metode objek dapat ditulis sebagai berikut:
var haoroomstest = {timeoutId: null, performprocessing: function () {console.log ("ubah ukuran"); }, proses: function () {clearTimeout (this.TimeOutId); var itu = ini; this.timeoutId = setTimeout (function () {that.PerformProcessing ();}, 500)}}Setelah ini, kami menggunakan:
$ (window) .resize (function () {haoomstest.process ();})
Ini akan mengurangi permintaan, mengurangi redrawing dom, dan mencapai tujuan pelambatan!
Cara fungsi lain mencekik
Selain cara kami menggunakan objek, metode lain dan metode pelambatan fungsi juga diperkenalkan secara online dan dalam informasi. Saya akan memperkenalkan beberapa di bawah ini!
Metode fungsi satu
fungsi throttle (metode, konteks) {clearTimeout (method.tid); method.tid = setTimeout (function () {Method.call (konteks);}, 100); }Kami menggunakan
Function REVIZEDIV () {Console.log ("Harooms")} $ (window) .resize (function () {throttle (resizeIv)})Efek yang sama dengan objek di atas!
Metode fungsi dua
Ada juga cara yang lebih populer untuk melarang uang secara online, jadi saya akan menulis tentang itu di sini!
function throttle (metode, tunda) {var timer = null; return function () {var context = this, args = argumen; ClearTimeout (timer); timer = setTimeout (function () {Method.Apply (Context, args);}, tunda); }}Maka Anda bisa menulis ini:
Fungsi resisasi () {console.log ("haorooms")} window.onresize = throttle (resizeiv, 500);Permintaan baru
Ketika kami melakukan pendaftaran Asosiasi Cerdas Fuzzy, kami akan mengikat acara Keyup pada input. Tapi saya tidak ingin memicu begitu sering, jadi akan ada masalah menggunakan metode di atas. Oleh karena itu, fungsi di atas sedikit berubah, sebagai berikut:
function throttle (metode, penundaan, durasi) {var timer = null, begin = new date (); return function () {var context = this, args = argumen, current = new date () ;; ClearTimeout (timer); if (saat ini-begin> = durasi) {method.Apply (konteks, args); mulai = saat ini; } else {timer = setTimeout (function () {Method.Apply (Context, args);}, tunda); }}}Dengan cara ini pemicu tidak akan sesering sebelumnya!