Rumah >hujung hadapan web >tutorial js >Contoh untuk menerangkan penggunaan setTimeout() dalam kemahiran JS_javascript

Contoh untuk menerangkan penggunaan setTimeout() dalam kemahiran JS_javascript

WBOYasal: 2016-05-16 15:17:301915semak imbas

Artikel ini menerangkan penggunaan setTimeout() dalam JS dengan contoh dan berkongsinya dengan semua orang untuk rujukan anda Kandungan khusus adalah seperti berikut

Rendering:

Kod khusus:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
var timer; //全局变量
var i=0; //变量初始化，全局变量
//定义函数：开始计时
function start()
{
 //获取id=result的对象
 var obj = document.getElementById("result");
 var str = "该程序已经运行了"+i+"秒！";
 i++; //展开 i=i+1
 //将变量str的内容写入到id=result中去
 obj.value = str; //给表单元素加内容，一般用value属性
      //除表单外的其它标记用JS写内容，使用innerHTML
 
 //设置延时器
 timer = window.setTimeout("start()",10);
}
//定义函数：停止计时
function stop()
{
 window.clearTimeout(timer);
}

</script>
</head>

<body>
<input type="button" id="result" value="该程序已经运行了0秒！" /><br />
<input type="button" onclick="start()" value="开始" />
<input type="button" onclick="stop()" value="停止" />
</body>
</html>

Mari kita bincangkan tentang penggunaan khusus:

1
kod (diperlukan): (Maksud asal ialah kod) Rentetan kod JavaScript yang akan dilaksanakan selepas fungsi yang akan dipanggil. millisec (diperlukan): Bilangan milisaat untuk menunggu sebelum melaksanakan kod.

Petua:
setTimeout() hanya melaksanakan kod sekali. Jika anda ingin memanggilnya beberapa kali, gunakan setInterval() atau minta kod itu sendiri memanggil setTimeout() sekali lagi.
2. Contoh

<html>
<head>
<scripttype="text/javascript">
functiontimedMsg()
{
vart=
setTimeout("
alert('5seconds!')",5000)
}
</script>
</head>
<body>
<form>
<inputtype="button"
value="Displaytimedalertbox!"onClick="timedMsg()">
</form>
<p>Clickonthebuttonabove.Analertboxwillbedisplayedafter5seconds.</p>
</body>
</html>

3. Contoh (2)

functionclockon(bgclock){
varnow=newDate();
varyear=now.getFullYear();
varmonth=now.getMonth();
vardate=now.getDate();
varday=now.getDay();
varhour=now.getHours();
varminu=now.getMinutes();
varsec=now.getSeconds();
varweek;
 
month=month+1;
if(month<10)month="0"+month;
if(date<10)date="0"+date;
if(hour<10)hour="0"+hour;
if(minu<10)minu="0"+minu;
if(sec<10)sec="0"+sec;
/*vararr_week=newArray("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
week=arr_week[day];
*/
switch(day){
case1:week="星期一";break;
case2:week="星期二";break;
case3:week="星期三";break;
case4:week="星期四";break;
case5:week="星期五";break;
case6:week="星期六";break;
default:week="星期日";break;
}
vartime="";
time=year+"年"+month+"月"+date+"日"+week+""+hour+":"+minu+":"+sec;
if(document.all){
bgclock.innerHTML="系统公告：["+time+"]"
}
vartimer=
setTimeout("clockon(bgclock)",200);
}

4. Pelaksanaan

Kami sering menghadapi situasi di mana kod dalam setTimeout(kod, millisec) mengandungi parameter formal,

Contohnya: maklumat yang perlu kami gesa kepada pengguna selepas 1 saat disimpan dalam mesej pembolehubah,

var msg='1shaspassed!';

Pada masa ini, sama ada ia dilaksanakan secara langsung

setTimeout(
alert(msg),1000);//alert(msg)会被立即执行

atau

setTimeout(“alert(msg)”,1000);//系统报错msgisnotdefined（chrome）

Kedua-duanya tidak boleh mencapai tujuan yang diharapkan, kerana pemasa akan bekerja keras untuk menukar kod menjadi objek fungsi Dalam kes ralat pertama, pemasa segera melaksanakan kod dan berharap untuk mengembalikan objek fungsi, tetapi hasilnya adalah sia-sia; dalam contoh ralat kedua, walaupun Objek fungsi berjaya dikapsulkan, tetapi pemasa melaksanakan kod di luar domain mesej yang boleh dilihat, jadi mesej tidak boleh dihantar dengan betul

Penyelesaian yang disyorkan ialah menggunakan panggilan balik fungsi tanpa nama

var msg='1shaspassed!';
setTimeout(function(){
alert(msg);
},1000);

Parameter pertama melepasi objek fungsi yang akan memanggil pernyataan yang diperlukan, sekali gus menyelesaikan masalah kod dengan parameter.

Di atas adalah keseluruhan kandungan artikel ini saya harap ia akan membantu semua orang dalam mempelajari pengaturcaraan javascript.

Kenyataan：

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

Artikel sebelumnya：Melaksanakan menu lungsur pilihan rangkaian peringkat kedua wilayah dan perbandaran di seluruh negara berdasarkan kemahiran javascript_javascriptArtikel seterusnya：Melaksanakan menu lungsur pilihan rangkaian peringkat kedua wilayah dan perbandaran di seluruh negara berdasarkan kemahiran javascript_javascript

Artikel berkaitan

Lihat lagi