JavaScript setTimeout menggunakan fungsi penutupan untuk mencetak nilai secara teratur_kemahiran javascript

WBOY
Lepaskan: 2016-05-16 15:24:48
asal
1331 orang telah melayarinya

Kali ini kita menggunakan setTimeout untuk melaksanakan contoh nilai cetakan secara berurutan mengikut masa Sebenarnya, pada masa awal, ia juga merupakan kesilapan yang sering saya lakukan, atau untuk mencapai keupayaan ini, nampaknya js adalah jauh, tetapi ia sebenarnya Salah saya, haha ​​Saya tidak faham kuasa JS Mari kita pergi terus ke topik ini kita menggunakan setTimeout. Mari kita mulakan dengan pemikiran yang paling mudah Kemudian ia akan Tulis kod berikut.

for(var i = 0; i < 5; i++)
{ 
setTimeout(console.log(i),i*1000); 
} 
Salin selepas log masuk

Walaupun kod ini mencetak nilai setiap i dalam urutan, 0, 1, 2, 3, 4. Walau bagaimanapun, masa pelaksanaan tidak memainkan peranan Kerana console.log() ialah panggilan pelaksanaan bagi method , selepas memanggil kaedah ini, ia dilaksanakan serta-merta!, jadi ia tidak mencapai tujuan yang diharapkan.

Kemudian mari kita teruskan melihat sekeping kod berikut

for(var i = 0; i< 5; i++ ){ setTimeout(function(){ console.log(i); },i*1000); } 
Salin selepas log masuk

Di sini kita menggunakan fungsi tanpa nama yang mengandungi console.log yang dicetak untuk mencetak i, jadi nilai i dikongsi Sebelum setTimeout pertama dilaksanakan, gelung for telah dilaksanakan dan i = 5 terakhir, jadi. saya akan dicetak empat kali Sebenarnya, kami mempunyai dua penyelesaian Mari lihat yang pertama dahulu:

var j = 0; function abc(){ console.log("j = "+j); j++; }  
for(var i = 0; i < 10; i++ ){ 
setTimeout(abc,i*1000) } 
Salin selepas log masuk

Di sini kita mempunyai satu lagi pembolehubah global untuk menyimpan nilai Setiap kali fungsi abc dilaksanakan, j ditambah sekali, jadi apabila setTimeout dilaksanakan, fungsi abc akan dipanggil, jadi kesan yang dijangkakan akan dicapai, tetapi di sini. j ialah Pembolehubah global, pembolehubah global akan menyebabkan masalah seperti mudah untuk menukar nilainya atau konflik penamaan Untuk melaksanakan kaedah kedua, kami memperkenalkan fungsi penutupan lagi Kerana fungsi penutupan, setiap kali ia dibuat, akan ada ruangnya sendiri untuk menyimpan nilai unik Jadi menggunakan pemikiran ini kami menulis kod seperti berikut

for(var i = 0; i < 10; i++ )
{ 
(function(x){ setTimeout(function()
{ 
console.log(x) },x*1000) })(i) 
}  
Salin selepas log masuk
Kami menghantar nilai i setiap kali gelung for dilaksanakan kepada fungsi penutupan yang dicipta berbeza, supaya nilai i yang disimpan dalam setiap fungsi penutupan akan berbeza Jadi kami mencapai hasil yang kami inginkan.

ps: Gunakan penutupan untuk hanya merangkum setTimeout

Apabila menulis skrip js, beberapa fungsi ejaan sering digunakan, seperti memanggil setTimeout

var msgalert="test"; 
 function TestAlert(msg) 
   { 
    alert(msg) 
   } 
    
   $(document).ready(function () { 
  $("#btnCancel").click(function (e) { 
    setTimeout("TestAlert("+msgalert+")",1000); 
    }); 
}) 
Salin selepas log masuk
Saya telah lama mencari, tetapi mengapa kotak dialog tidak muncul. Selepas menyemak untuk masa yang lama, saya mendapati bahawa sepasang petikan tunggal

telah hilang.

$(document).ready(function () { 
  $("#btnCancel").click(function (e) { 
    setTimeout("TestAlert('"+msgalert+"')",1000); 
    }); 
}) 
Salin selepas log masuk
Cara penulisan ini terdedah kepada ralat, dan tidak mudah untuk mengesan ralat Jika anda menggunakan penutupan, anda boleh mengelaknya sepenuhnya seperti berikut

 var msgalert="test"; 
  function dalayAlert(msg ,time){  
  setTimeout( 
  TestAlert(msg), 
  time 
  ); 
  }  
 function TestAlert(msg) 
 { 
  alert(msg) 
 } 
$(document).ready(function () {   
$("#btnCancel").click(function (e) { 
   dalayAlert(msgalert,1000) 
 }); 
Salin selepas log masuk
Disebabkan penggunaan penutupan, ia lebih mudah dan semakan ralat juga mudah

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