Pelajari pemasa javascript daripada kemahiran me_javascript

1. Gambaran keseluruhan pemasa

Objek tetingkap menyediakan dua kaedah untuk melaksanakan kesan pemasa, iaitu window.setTimeout() dan window.setInterval. Yang pertama boleh membuat sekeping kod dijalankan selepas masa yang ditentukan manakala yang terakhir boleh membuat sekeping kod dijalankan sekali setiap masa yang ditentukan. Prototaip mereka adalah seperti berikut:

window.setTimeout(expression,milliseconds); 
window.setInterval(expression,milliseconds); 

Antaranya, ungkapan boleh menjadi sekeping kod yang disertakan dalam tanda petikan, atau ia boleh menjadi nama fungsi Pada masa yang ditentukan, sistem akan memanggil fungsi secara automatik apabila menggunakan nama fungsi sebagai pemegang panggilan tidak boleh mengandungi sebarang parameter ; Apabila menggunakan rentetan, anda boleh menulis parameter yang akan dihantar di dalamnya. Parameter kedua bagi kedua-dua kaedah ialah milisaat, yang mewakili bilangan milisaat untuk kelewatan atau pelaksanaan berulang. Kedua-dua kaedah diperkenalkan di bawah.

Menggunakan SetInterval sangat serupa dengan menetapkan fungsi tunda setTimeout. setTimeout digunakan untuk menangguhkan tempoh masa sebelum melakukan operasi.

• setTimeout("function",time) menetapkan objek timeout
• setInterval("fungsi",masa) menetapkan objek tamat masa

setInterval diulang secara automatik dan setTimeout tidak akan berulang.

• clearTimeout(objek) mengosongkan set setTimeout objek
• clearInterval(objek) mengosongkan objek setInterval

Gunakan pemasa untuk melaksanakan pelaksanaan JavaScript yang ditangguhkan atau berulang.

2. Penggunaan khusus

1． window.setKaedah tamatmasa

Kaedah ini boleh menangguhkan pelaksanaan fungsi, contohnya:

function hello(){ 
 alert("hello"); 
} 
window.setTimeout(hello,5000); 

Kod ini akan menyebabkan kotak dialog "hello" dipaparkan 5 saat selepas halaman dibuka. Ayat terakhir juga boleh ditulis sebagai:

window.setTimeout("hello()",5000); 

Pembaca boleh menghargai perbezaan mereka. Sifat ini juga wujud dalam kaedah window.setInterval.

Jika anda membatalkan pelaksanaan tertunda sebelum tempoh kelewatan dicapai, anda boleh menggunakan kaedah window.clearTimeout(timeoutId), yang menerima id yang mewakili pemasa. Id ini dikembalikan dengan kaedah setTimeout, contohnya:

function hello(){ 
 alert("hello"); 
} 
var id=window.setTimeout(hello,5000); 
document.onclick=function(){ 
 window.clearTimeout(id); 
} 

Dengan cara ini, jika anda ingin membatalkan paparan, anda hanya perlu mengklik mana-mana bahagian halaman dan kaedah window.clearTimeout akan dilaksanakan, supaya operasi tamat masa akan dibatalkan.

2. window.setKaedah Interval

Kaedah ini menyebabkan fungsi dipanggil setiap masa tetap, yang merupakan kaedah yang sangat biasa. Jika anda ingin membatalkan pelaksanaan berjadual, sama seperti kaedah clearTimeout, anda boleh memanggil kaedah window.clearInterval. Kaedah clearInterval juga menerima nilai yang dikembalikan oleh kaedah setInterval sebagai parameter. Contohnya:

//定义一个反复执行的调用 
var id=window.setInterval("somefunction",10000); 
//取消定时执行 
window.clearInterval(id); 

3. Cabaran

Kod di atas hanya digunakan untuk menggambarkan cara membatalkan pelaksanaan berjadual. Sebenarnya, kaedah setInterval perlu digunakan pada banyak kesempatan Berikut ialah topik untuk anda: Reka jam randik memperkenalkan tujuan fungsi setInterval . : jam randik ini Ia akan menyertakan dua butang dan kotak teks untuk memaparkan masa Apabila butang mula diklik, unit minimum ialah 0.01 saat masa dan butang lain Digunakan untuk mengosongkan masa semasa kepada sifar. Mari berlatih terlebih dahulu Artikel seterusnya akan mendedahkan jawapan untuk anda. 3. Hantar parameter kepada panggilan pemasa

Sama ada window.setTimeout atau window.setInterval, parameter tidak boleh diambil apabila menggunakan nama fungsi sebagai pemegang panggilan Dalam banyak kes, parameter mesti diambil, yang memerlukan penyelesaian. Sebagai contoh, fungsi hello(_name) digunakan untuk memaparkan mesej alu-aluan untuk nama pengguna:

Pada masa ini, adalah tidak mungkin untuk menggunakan pernyataan berikut untuk menangguhkan pelaksanaan fungsi helo selama 3 saat:

var userName="jack"; 
//根据用户名显示欢迎信息 
function hello(_name){ 
 alert("hello,"+_name); 
} 

Ini akan menyebabkan fungsi hello dilaksanakan serta-merta dan menghantar nilai pulangan sebagai pemegang panggilan kepada fungsi setTimeout Hasilnya bukan apa yang diperlukan oleh program. Anda boleh mencapai hasil yang diingini dengan menggunakan bentuk rentetan:

window.setTimeout(hello(userName),3000); 

Rentetan di sini ialah sekeping kod JavaScript, dengan nama pengguna mewakili pembolehubah. Walau bagaimanapun, cara penulisan ini tidak cukup intuitif, dan dalam beberapa kes, nama fungsi mesti digunakan. Berikut adalah helah kecil untuk memanggil fungsi dengan parameter:

window.setTimeout("hello(userName)",3000); 

Fungsi _hello ditakrifkan di sini, yang digunakan untuk menerima parameter dan mengembalikan fungsi tanpa parameter Parameter fungsi luaran digunakan di dalam fungsi ini, supaya ia boleh dipanggil tanpa menggunakan parameter. Dalam fungsi window.setTimeout, gunakan _hello(Nama pengguna) untuk mengembalikan pemegang fungsi tanpa parameter, dengan itu merealisasikan fungsi lulus parameter.

var userName="jack"; 
//根据用户名显示欢迎信息 
function hello(_name){ 
 alert("hello,"+_name); 
} 
//创建一个函数，用于返回一个无参数函数 
function _hello(_name){ 
 return function(){ 
 hello(_name); 
 } 
} 
window.setTimeout(_hello(userName),3000); 
</script> 

4 Memahami dengan betul fungsi "masa" pemasa

Pertama lihat sekeping kod

代码先输出哪个？答案在程序中很明显。为什么呢？

初学者可能对Javascript的定时器有误解，认为它们是线程，其实Javascript是运行于单线程中的，而定时器仅仅是计划在未来的某个时间执行，而具体的执行时间是不能保证的，因为在页面的生命周期中，不同的时间可能有其它代码在控制Javascript的里进程。浏览器只是负责进行排序，指派某个代码在某个时间点运行。

下面说下Javascript线程，下图表示javascript进程时间线。

除了javascript执行进程外，还有一个需要在进程下一次空闲时间执行的代码队列，随着页面在其生命周期内的推移，代码会按照执行顺序添加到对列中，例如：当一个按钮被按下时，它的事件处理就会添加到队列中，并在下一个可能的时间内执行。

定时器对队列的工作方式是，当特定的时间过去后，将代码插入，注意添加到队列并不意味着它会马上执行，而只能说它会尽快执行，设定一个250ms后执行的定时器，不代表250ms后它会马上执行，它只会表示在250ms后被加入到队列中，如果这个时间点队列是空闲的，那么这段代码就会被执行。

请看以下代码：

var btn = document.getElementById("mybtn");
 btn.onclick = function () {
 setTimeout(function () {
 document.getElementById("message").nodeName = "mymessage";
 //其它代码
 }, 250);
 }

对于定时器最要注意的是：指定的时间间隔表示何时将定时器的代码添加到队列中，而不是何时执行代码。关于这个onclick事伯处理的进程时间线请看下图：

以上就是本文的全部内容，希望通过这篇文章大家更加了解javascript的定时器，大家共同进步。