Exemples pour expliquer l'utilisation de setTimeout() dans les compétences JS

Exemples pour expliquer l'utilisation de setTimeout() dans les compétences JS_javascript

WBOY

Libérer： 2016-05-16 15:17:30

original

1913 Les gens l'ont consulté

Cet article explique l'utilisation de setTimeout() dans JS avec des exemples et le partage avec tout le monde pour votre référence. Le contenu spécifique est le suivant

Rendu :

Code spécifique :

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

Copier après la connexion

Parlons de l'utilisation spécifique :

1. Paramètres
code (obligatoire) : (La signification originale est code) La chaîne de code JavaScript à exécuter après la fonction à appeler.
millisec (obligatoire) : nombre de millisecondes à attendre avant d'exécuter le code.
Conseils :
setTimeout() n'exécute le code qu'une seule fois. Si vous souhaitez l'appeler plusieurs fois, utilisez setInterval() ou demandez au code lui-même d'appeler à nouveau setTimeout().
2. Exemple

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

Copier après la connexion

3. Exemple (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);
}

Copier après la connexion

4. Exécution

Nous rencontrons souvent une situation où le code dans setTimeout(code, millisec) contient des paramètres formels,
Par exemple : les informations que nous devons demander à l'utilisateur après 1 seconde sont stockées dans la variable msg,

var msg='1shaspassed!';

Copier après la connexion

À ce moment, s'il est exécuté directement

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

Copier après la connexion

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

Copier après la connexion

Aucun d'eux ne peut atteindre l'objectif attendu, car le minuteur travaillera dur pour convertir le code en un objet fonction, dans le premier cas d'erreur, le minuteur exécute immédiatement le code et espère renvoyer un objet fonction, mais le résultat. est en vain ; dans le deuxième exemple d'erreur, bien que l'objet fonction soit encapsulé avec succès, mais le minuteur exécute le code en dehors du domaine visible de msg, donc msg ne peut pas être livré correctement
La solution recommandée est d'utiliser des rappels de fonctions anonymes

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

Copier après la connexion

Le premier paramètre transmet un objet fonction qui appellera l'instruction requise, résolvant ainsi le problème du code avec des paramètres.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde dans l'apprentissage de la programmation javascript.