Perbincangan ringkas tentang fungsi JavaScript throttling

Perbincangan ringkas tentang fungsi JavaScript throttling_Pengetahuan asas

WBOY

Lepaskan： 2016-05-16 16:28:09

asal

1452 orang telah melayarinya

Sesetengah pengiraan dan pemprosesan dalam penyemak imbas jauh lebih mahal daripada yang lain. Sebagai contoh, operasi DOM memerlukan lebih banyak memori dan masa CPU daripada interaksi bukan DOM. Percubaan untuk melakukan terlalu banyak operasi berkaitan DOM secara berturut-turut boleh menyebabkan penyemak imbas hang dan kadangkala ranap. Ini berkemungkinan besar berlaku apabila menggunakan pengendali acara onresize dalam IE Apabila penyemak imbas diubah saiz, acara dicetuskan secara berterusan. Jika anda cuba melakukan operasi DOM di dalam pengendali acara onresize, kekerapan perubahan yang tinggi mungkin menyebabkan penyemak imbas ranap.
Idea asas di sebalik pendikitan fungsi ialah kod tertentu tidak boleh dilaksanakan secara berterusan dan berulang kali tanpa gangguan. Kali pertama fungsi dipanggil, pemasa dicipta untuk menjalankan kod selepas selang waktu tertentu. Apabila fungsi dipanggil kali kedua, ia mengosongkan pemasa sebelumnya dan menetapkan satu lagi. Jika pemasa sebelumnya telah dilaksanakan, operasi ini tidak mempunyai makna. Walau bagaimanapun, jika pemasa sebelumnya masih belum dilaksanakan, ia sebenarnya digantikan dengan pemasa baru. Tujuannya adalah untuk melaksanakan fungsi hanya selepas permintaan untuk melaksanakannya telah dihentikan untuk beberapa lama.

Salin kod Kod adalah seperti berikut:

pendikit fungsi (kaedah, konteks){

Cleartimeout (Kaedah.tid);
                    kaedah.tId = setTimeout ( fungsi () {

kaedah.panggilan (konteks);

          }

Contoh aplikasi:

Katakan terdapat elemen

yang perlu mengekalkan ketinggiannya sama dengan lebarnya. Ia boleh dikodkan seperti berikut:

Salin kod Kod adalah seperti berikut:

fungsi resizeDiv(){

              var div = document.getElementById("mydiv");

              div.style.height = div.offsetWidth "px";

            }

              window.onresize = function(){

Pendikit(resizeDiv);

            }

Di sini, fungsi ubah saiz dimasukkan ke dalam fungsi berasingan yang dipanggil resizeDiv, dan kemudian pengendali acara onresize memanggil throttle() dan meneruskan fungsi resizeDiv dan bukannya memanggil resizeDiv() secara terus. Dalam kebanyakan kes, pengguna tidak akan merasakan perubahan itu, walaupun pengiraan yang disimpan pada penyemak imbas mungkin sangat besar.