Maison > Article > interface Web > Exemples pour expliquer l'utilisation de setTimeout() dans les compétences JS_javascript

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

WBOYoriginal: 2016-05-16 15:17:301891parcourir

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>

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>

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

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

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

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

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

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

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.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Mise en œuvre de menus déroulants de sélection de liens de deuxième niveau provinciaux et municipaux à l'échelle nationale basés sur les compétences javascript_javascriptArticle suivant：Mise en œuvre de menus déroulants de sélection de liens de deuxième niveau provinciaux et municipaux à l'échelle nationale basés sur les compétences javascript_javascript

Articles Liés

Voir plus