suchen

Heim  >  Artikel  >  Web-Frontend  >  Beispiele zur Erläuterung der Verwendung von setTimeout() in JS_Javascript-Kenntnissen

Beispiele zur Erläuterung der Verwendung von setTimeout() in JS_Javascript-Kenntnissen

WBOY
WBOYOriginal
2016-05-16 15:17:301893Durchsuche

In diesem Artikel wird die Verwendung von setTimeout() in JS anhand von Beispielen erläutert und als Referenz für alle freigegeben. Der spezifische Inhalt lautet wie folgt:

Rendering:

Spezifischer Code: 

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

Lassen Sie uns über die spezifische Verwendung sprechen:

1. Parameter
Code (erforderlich): (Die ursprüngliche Bedeutung ist Code) Die JavaScript-Codezeichenfolge, die nach der aufzurufenden Funktion ausgeführt werden soll.
Millisekunden (erforderlich): Die Anzahl der Millisekunden, die vor der Codeausführung gewartet werden soll.
Tipps:
setTimeout() führt Code nur einmal aus. Wenn Sie es mehrmals aufrufen möchten, verwenden Sie setInterval() oder lassen Sie den Code selbst setTimeout() erneut aufrufen.
2. Beispiel

<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. Beispiel (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. Ausführung

Wir stoßen oft auf eine Situation, in der der Code in setTimeout(code, millisec) formale Parameter enthält,
Beispiel: Die Informationen, die wir dem Benutzer nach einer Sekunde mitteilen müssen, werden in der Variablen msg,
, gespeichert 

var msg='1shaspassed!';

Zu diesem Zeitpunkt, ob es direkt ausgeführt wird

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

oder 

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

Keiner von beiden kann den erwarteten Zweck erreichen, da der Timer hart arbeiten wird, um den Code in ein Funktionsobjekt umzuwandeln. Im ersten Fehlerfall führt der Timer den Code sofort aus und hofft, ein Funktionsobjekt, aber das Ergebnis zurückzugeben ist vergeblich; im zweiten Fehlerbeispiel wurde das Funktionsobjekt zwar erfolgreich gekapselt, aber der Timer führt Code außerhalb der sichtbaren Domäne von msg aus, sodass msg nicht korrekt übermittelt werden kann
Die empfohlene Lösung ist die Verwendung anonymer Funktionsrückrufe

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

Der erste Parameter übergibt ein Funktionsobjekt, das die erforderliche Anweisung aufruft und so das Problem des Codes mit Parametern löst.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle beim Erlernen der Javascript-Programmierung hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Implementierung landesweiter, provinzieller und kommunaler Linkage-Dropdown-Auswahlmenüs der zweiten Ebene basierend auf Javascript_Javascript-KenntnissenNächster Artikel：Implementierung landesweiter, provinzieller und kommunaler Linkage-Dropdown-Auswahlmenüs der zweiten Ebene basierend auf Javascript_Javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen