Contoh untuk menerangkan penggunaan setTimeout() dalam kemahiran JS

Contoh untuk menerangkan penggunaan setTimeout() dalam kemahiran JS_javascript

WBOY

Lepaskan： 2016-05-16 15:17:30

asal

1914 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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);
}

Salin selepas log masuk

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!';

Salin selepas log masuk

Pada masa ini, sama ada ia dilaksanakan secara langsung

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

Salin selepas log masuk

atau

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

Salin selepas log masuk

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);

Salin selepas log masuk

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.