Rumah > hujung hadapan web > tutorial js > Penjelasan terperinci tentang kemahiran pemasa_javascript lanjutan javascript

Penjelasan terperinci tentang kemahiran pemasa_javascript lanjutan javascript

WBOY
Lepaskan: 2016-05-16 15:22:42
asal
1561 orang telah melayarinya

setTimeout() dan setInterval() boleh digunakan untuk mencipta pemasa dan penggunaan asasnya tidak akan diperkenalkan di sini. Di sini kami terutamanya memperkenalkan baris gilir kod javascript. Tiada kod dalam JavaScript dilaksanakan serta-merta, ia dilaksanakan sebaik sahaja proses melahu. Oleh itu, masa yang ditetapkan dalam pemasa tidak bermakna masa pelaksanaan mesti sepadan, tetapi ini bermakna kod akan ditambah pada baris gilir untuk menunggu selepas selang masa yang ditentukan. Jika tiada apa-apa lagi dalam baris gilir pada masa ini, maka kod ini akan dilaksanakan, dan ia akan kelihatan seolah-olah kod itu dilaksanakan pada titik masa yang ditentukan dengan tepat. Jadi beberapa masalah akan timbul.

Pemasa ulangan

Biasanya, kami menggunakan kaedah setInterval untuk melaksanakan sekeping kod tertentu pada selang masa yang sama berulang kali. Tetapi terdapat dua masalah dengan menggunakan kaedah ini: yang pertama ialah beberapa selang akan dilangkau; yang kedua ialah selang antara pelaksanaan kod untuk berbilang pemasa mungkin lebih kecil daripada yang dijangkakan.
Di sini, mari kita ambil contoh: Jika pengendali acara onclick menggunakan setInterval untuk menetapkan pemasa berulang dengan selang 200ms, jika pengendali acara mengambil masa 300ms untuk diselesaikan, ia akan melangkau selang masa dan menjalankan kod pemasa.
Kita juga boleh mendapatkan kesimpulan melalui kod berikut:

//重复定时器
var i =0;
setInterval(function(){
 //如果事件处理时间长于间隔时间
 i++;
 for(var j=0;j<100000000;j++){}
 document.write(i+' ');
},100);
//可以明显感觉到时间间隔不相等
为了避免这种时间间隔的问题,我们可以采用链式调用setTimeout方法来取代setInterval。

//可以采用链式调用setTimeout来取代setInterval
var i = 0;
setTimeout(function(){
 //处理内容
 i++;
 for(var j=0;j<100000000;j++){}
 document.write(i+' ');
 //
 setTimeout(arguments.callee,100);
},100);
//这样处理效果明显好多了。

Salin selepas log masuk

Pemasa baharu dibuat setiap kali fungsi dilaksanakan Panggilan setTimeout kedua menggunakan arguments.callee untuk mendapatkan rujukan kepada fungsi yang sedang dilaksanakan dan menetapkan pemasa lain untuknya. Ini dilakukan supaya tiada kod pemasa baharu akan dimasukkan ke dalam baris gilir sehingga kod pemasa sebelumnya dilaksanakan, memastikan bahawa tidak akan ada sebarang selang masa yang hilang dan sekurang-kurangnya masa yang ditentukan akan menunggu sebelum kod pemasa seterusnya dilaksanakan. selang waktu untuk mengelakkan larian berterusan. Ia boleh dikatakan bahawa ia membunuh dua burung dengan satu batu Pada masa kini, animasi dalam rangka kerja arus perdana umumnya melaksanakan pemasaan berulang dengan cara ini.

Fungsi pendikit

Pemasa bukan sahaja digunakan untuk pemasaan, tetapi juga boleh digunakan untuk melegakan tekanan pada pelayar. Sesetengah pengiraan dan pemprosesan dalam penyemak imbas adalah lebih mahal daripada yang lain Sebagai contoh, operasi DOM memerlukan lebih banyak memori dan masa CPU Penggunaan berterusan terlalu banyak operasi DOM boleh menyebabkan penyemak imbas hang atau ranap.
Idea asas 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. Tujuannya adalah untuk melaksanakan fungsi semula selepas permintaan untuk melaksanakan fungsi berhenti untuk satu tempoh masa.
Kodnya adalah seperti berikut:

//再来谈谈函数节流
function throttle(method,context){
 clearTimeout(method.tId);
 method.tId = setTimeout(function(){
  method.call(context);
 },100);
}
//该函数接受两个参数,第一个是要执行的函数,第二个是作用域。
//使用方法demo
//未使用情况:
window.onresize = function(){
 var div = document.getElementByTagName(body);
 div.style.height = div.offsetWidth +'px';
}
//使用情况;
function resizeDiv(){
 var div = document.getElementByTagName(body);
 div.style.height = div.offsetWidth +'px';
}
window.onresize = function(){
 throttle(resizeDiv);
};
//只要代码是周期性执行的,都应该使用节流。
Salin selepas log masuk

Ini tidak memberikan pengguna perasaan yang hebat, tetapi ia mengurangkan banyak tekanan pada penyemak imbas Pendikitan fungsi juga merupakan salah satu teknik yang biasa digunakan dalam banyak rangka kerja.

Di atas ialah pengenalan yang berkaitan dengan pemasa lanjutan JavaScript saya harap ia akan membantu pembelajaran semua orang.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan