Penerokaan mendalam tentang kemahiran javascript timers

Penerokaan mendalam tentang kemahiran javascript timers_javascript

WBOY

Lepaskan： 2016-05-16 16:22:40

asal

1310 orang telah melayarinya

benang tunggal javascript

Urut tunggal JavaScript berkaitan dengan tujuannya. Sebagai bahasa skrip pelayar, tujuan utama JavaScript adalah untuk berinteraksi dengan pengguna dan memanipulasi DOM. Ini menentukan bahawa ia hanya boleh menjadi satu-benang, jika tidak, ia akan menyebabkan masalah penyegerakan yang sangat kompleks. Sebagai contoh, katakan JavaScript mempunyai dua utas pada masa yang sama Satu utas menambah kandungan pada nod DOM tertentu, dan utas lain memadamkan nod tersebut. Oleh itu, untuk mengelakkan kerumitan, JavaScript telah menjadi satu utas sejak ia dilahirkan Ini telah menjadi ciri teras bahasa dan tidak akan berubah pada masa hadapan.

Tugas beratur

Urut tunggal bermakna semua tugasan perlu dibariskan, dan tugasan seterusnya tidak akan dilaksanakan sehingga tugasan sebelumnya selesai. Jika tugasan sebelumnya mengambil masa yang lama, tugasan seterusnya perlu menunggu.

dipacu peristiwa tak segerak

Banyak gelagat dalam penyemak imbas adalah tidak segerak (Tidak segerak), seperti: peristiwa klik tetikus, peristiwa seret saiz tetingkap, peristiwa pencetus pemasa, panggilan balik penyelesaian XMLHttpRequest, dsb. Apabila peristiwa tak segerak berlaku, ia memasuki baris gilir acara. Penyemak imbas mempunyai gelung mesej dalaman yang besar, Gelung Acara, yang meninjau baris gilir acara yang besar dan memproses acara. Sebagai contoh, penyemak imbas sedang sibuk memproses acara onclick Pada masa ini, acara lain berlaku (seperti tetingkap onSize ini dimasukkan ke dalam baris gilir acara ini hanya akan dilaksanakan apabila pemprosesan sebelumnya). telah selesai dan ia adalah percuma.

Gelung Acara

JavaScript adalah satu-benang, tetapi penyemak imbas bukan satu-benang

Pelayar akan mempunyai sekurang-kurangnya proses berikut

1. Urutan pemaparan GUI Pelayar

2.Benang enjin JavaScript

3. Urutan pencetus berjadual penyemak imbas

4. Urutan pencetus peristiwa penyemak imbas

5. http benang permintaan tak segerak

Oleh kerana enjin JavaScript adalah satu-benang, kod mula-mula ditolak ke dalam baris gilir dan kemudian dijalankan oleh enjin dengan cara masuk dahulu, keluar dahulu. Fungsi pemprosesan acara dan fungsi pelaksanaan pemasa juga akan dibariskan dalam baris gilir ini, dan kemudian gelung tak terhingga akan digunakan untuk mengeluarkan fungsi secara berterusan daripada kepala baris gilir untuk pelaksanaan Ini ialah Gelung Acara.

Untuk meringkaskan, js adalah satu utas, tetapi penyemak imbas adalah berbilang utas Apabila menghadapi perkara tak segerak, penyemak imbas meletakkan panggilan balik tak segerak ke dalam Gelung Peristiwa Apabila urutan js tidak sibuk, pergi ke Baca Gelung Acara

Prinsip pemasa

Penggunaan pemasa

setTimeout(fn, delay)

setInterval(fn, kelewatan)

fn ialah fungsi atau rentetan, kelewatan ialah masa tunda, unit ialah milisaat

Terdapat perkara berikut yang perlu diperhatikan

1.fn boleh menjadi rentetan, tetapi tidak disyorkan untuk menggunakannya dengan cara ini

2. Jika fungsi in.fn mempunyai ini, ini akan menghala ke tetingkap apabila dilaksanakan

Jika anda memahami js single thread dan event loop, prinsip pemasa juga mudah difahami

Jika pemasa ditetapkan, apabila masa kelewatan dicapai, penyemak imbas akan meletakkan acara pelaksanaan tertunda ke dalam gelung Acara Apabila masa tamat, ia akan dilaksanakan jika utas js melahu (jadi ketepatan pemasa tidak tepat)

Saya membaca artikel yang memperkenalkan perbezaan antara setTimeout dan setInterval dalam fungsi pengundian sepanjang masa

Salin kod Kod adalah seperti berikut:

setTimeout(function(){

                 setMasa(arguments.callee,100)                                                                        
},100)

setInterval(function(){},1000)

Maksud umum artikel ialah setTimeout memulakan pemasa seterusnya selepas fungsi panggil balik dilaksanakan, jadi ia mesti dilaksanakan pada selang waktu, manakala setInterval sentiasa dilaksanakan Jika ia menemui urutan js dan terus dilaksanakan, ia mungkin menjadi Tambahkan berbilang panggilan balik pada gelung Acara Apabila utas js tidak sibuk, berbilang akan dilaksanakan sekaligus.

Selepas ujian, didapati tidak kira di bawah ie, ff, chrome, Opera, Safari, setInterval ditetapkan pada selang waktu tertentu

Kod ujian adalah seperti berikut

Salin kod Kod adalah seperti berikut:

setInterval(function(){
xx.innerHTML=xx.innerHTML 1;
},100);

untuk(var i=0;i<6000000;i ){
xx.offsetWidth
}

setTimeout(function(){
penyahpepijat;
},10)

Pada titik putus, hanya satu 1 dicetak

Masalah ketepatan pemasa

Oleh kerana js adalah single-threaded, jika ia sibuk, pemasa pasti akan menjadi tidak tepat, dan ia akan menjadi lebih lama dan lebih lama nampaknya tiada penyelesaian untuk ini, tiada penyelesaian

Isu ketepatan lain ialah set selang minimumTimeout(seronok,0)

Apabila urutan js tidak sibuk, ia tidak boleh dilaksanakan serta-merta selepas 0 saat sentiasa ada selang minimum, dan setiap penyemak imbas ini belum diuji

Saya membaca artikel yang menyebut standard w3c Masa pelaksanaan minimum pemasa ialah 4ms. ! !

Sesetengah pengoptimuman yang berkaitan dengan pemasa

Masih terdapat beberapa pengoptimuman semasa membuat pemasa

1. Contohnya, jika window.onresize terikat, ia akan dicetuskan dengan sangat kerap apabila penyemak imbas dizum, jadi pelaksanaan boleh ditangguhkan dan dikosongkan apabila pelaksanaan seterusnya berlaku untuk mengurangkan pelaksanaan yang kerap

Kod pseudo adalah seperti berikut

Salin kod Kod adalah seperti berikut:

pemasa var;

Fungsi r(){

          clearTimeout(pemasa);

        pemasa = setTimeout(function(){

                       //buat sesuatu

         },150);                                                 
}

2. Apabila bar skrol ditarik ke bawah, mesti ada pemasa untuk memuatkan gambar secara malas untuk mengelakkan pengiraan yang berlebihan

3. Apabila terdapat beberapa tempat yang memerlukan pemasa, ia boleh digabungkan menjadi satu pemasa Selang masa adalah berdasarkan yang terkecil selang dicapai, tatasusunan dilalui Hanya laksanakan

Demo kecil

Salin kod Kod adalah seperti berikut:

小伙伴们是否对javascript定时器有所了解了呢，如有疑问给我留言吧.