Explication détaillée de l'utilisation de SetInterval et setTimeout dans les compétences JavaScript_javascript

setTimeout

Description

setTimeout(code,millisec)

La méthode setTimeout() est utilisée pour appeler une fonction ou une expression calculée après un nombre spécifié de millisecondes.

Remarque : pendant le processus d'appel, vous pouvez utiliser clearTimeout(id_of_settimeout) pour terminer

参数	描述
code	必需，要调用的函数后要执行的 JavaScript 代码串。
millisec	必需，在执行代码前需等待的毫秒数。

setTimeinterval

setInterval(code,millisec[,"lang"])

参数	描述
code	必需，要调用的函数或要执行的代码串。
millisec	必需，周期性执行或调用code之间的时间间隔，以毫秒计。

La méthode setInterval() peut appeler une fonction ou calculer une expression selon la période spécifiée (en millisecondes).

Définir le délai dans JS :

L'utilisation de SetInterval est très similaire au réglage de la fonction de retard setTimeout. setTimeout est utilisé pour retarder un certain temps avant d'effectuer une opération.

setTimeout("function",time) définit un objet timeout setInterval("function",time) définit un objet timeout

SetInterval est automatiquement répété et setTimeout ne sera pas répété.

clearTimeout(object) efface l'objet setTimeout clearInterval(object) efface l'objet setInterval

La méthode setInterval() peut appeler une fonction ou calculer une expression selon la période spécifiée (en millisecondes).

Utilisez une minuterie pour implémenter une exécution retardée ou répétée de JavaScript. L'objet window fournit deux méthodes pour obtenir l'effet de la minuterie, à savoir window.setTimeout() et window.setInterval. Le premier peut exécuter un morceau de code après une heure spécifiée ; tandis que le second peut exécuter un morceau de code une fois à chaque heure spécifiée. Leurs prototypes sont les suivants : window.setTimeout(expression,milliseconds); window.setInterval(expression,milliseconds); Parmi eux, l'expression peut être un morceau de code entre guillemets, ou il peut s'agir d'un nom de fonction lorsque celui-ci est spécifié. le moment est atteint, le système La fonction sera appelée automatiquement Lorsque vous utilisez le nom de la fonction comme handle d'appel, elle ne peut prendre aucun paramètre lors de l'utilisation d'une chaîne, vous pouvez y écrire les paramètres à passer. Le deuxième paramètre des deux méthodes est les millisecondes, qui représentent le nombre de millisecondes de retard ou d'exécution répétée.

Les deux méthodes sont présentées ci-dessous.

1． Méthode window.setTimeout Cette méthode peut retarder l'exécution d'une fonction, par exemple :

<script language="JavaScript" type="text/javascript">
<!--
 function hello(){ alert("hello"); } window.setTimeout(hello,5000);
//-->
 </script>

Ce code entraînera l'affichage de la boîte de dialogue "bonjour" 5 secondes après l'ouverture de la page. La dernière phrase peut également être écrite comme suit : window.setTimeout("hello()",5000); Cette propriété existe également dans la méthode window.setInterval. Si vous annulez l'exécution différée avant que le délai ne soit atteint, vous pouvez utiliser la méthode window.clearTimeout(timeoutId), qui reçoit un identifiant représentant un timer. Cet identifiant est renvoyé par la méthode setTimeout, par exemple :

<script language="JavaScript" type="text/javascript">
<!--
function hello(){   
alert("hello");
}
var id=window.setTimeout(hello,5000);
document.onclick=function(){   
window.clearTimeout(id);
 }
//-->
</script>

De cette façon, si vous souhaitez annuler l'affichage, il vous suffit de cliquer sur n'importe quelle partie de la page, et la méthode window.clearTimeout sera exécutée, de sorte que l'opération de timeout soit annulée.

2． Méthode window.setInterval Cette méthode provoque l'appel d'une fonction à chaque heure fixe et est une méthode très courante. Si vous souhaitez annuler l'exécution planifiée, comme pour la méthode clearTimeout, vous pouvez appeler la méthode window.clearInterval. La méthode clearInterval reçoit également une valeur renvoyée par la méthode setInterval en tant que paramètre. Par exemple : //Définir un appel à exécuter de manière répétée var id=window.setInterval("somefunction",10000); //Annuler l'exécution planifiée window.clearInterval(id); Le code ci-dessus est uniquement utilisé pour illustrer comment annuler un appel. exécution programmée. En fait, la méthode setInterval doit être utilisée à plusieurs reprises. Ci-dessous, nous allons concevoir un chronomètre pour introduire l'utilisation de la fonction setInterval : le chronomètre comprendra deux boutons et une zone de texte pour afficher l'heure. Lorsque vous cliquez sur le bouton de démarrage, le chronométrage démarre. L'unité minimale est de 0,01 seconde. Un nouveau clic sur le bouton arrêtera le chronométrage et la zone de texte affichera le temps écoulé. Un autre bouton permet de remettre l'heure actuelle à zéro. Le code d'implémentation est le suivant :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head>
 <title> New Document </title>
 </head> 
<body> 
<form action="somepage.asp"> 
<input type="text" value="0" name="txt1"/> 
<input type="button" value="开始" name="btnStart"/> 
<input type="button" value="重置" name="btnReset"/> 
</form> 
</body> 
</html>

<script language="JavaScript" type="text/javascript">
<!--
//获取表单中的表单域
var txt=document.forms[0].elements["txt1"];
 var btnStart=document.forms[0].elements["btnStart"];
 var btnReset=document.forms[0].elements["btnReset"]
 //定义定时器的id
var id;
//每10毫秒该值增加1
var seed=0;
btnStart.onclick=function(){   
//根据按钮文本来判断当前操作   
 if(this.value=="开始"){       
 //使按钮文本变为停止       
 this.value="停止";       
//使重置按钮不可用       
 btnReset.disabled=true;       
//设置定时器，每0.01s跳一次       
id=window.setInterval(tip,10);    }
else{       
//使按钮文本变为开始       
this.value="开始";       
//使重置按钮可用       
 btnReset.disabled=false;       
//取消定时       
window.clearInterval(id);   
 } }
//重置按钮
btnReset.onclick=function(){   
seed=0;
 }
//让秒表跳一格
 function tip(){  
  seed++;   
 txt.value=seed/100;
}
//-->
</script>

La transmission de paramètres à l'appel du timer, qu'il s'agisse de window.setTimeout ou window.setInterval, ne peut pas prendre de paramètres lors de l'utilisation du nom de la fonction comme handle d'appel. Dans de nombreux cas, des paramètres doivent être pris, ce qui nécessite une solution. Par exemple, pour la fonction hello(_name), elle permet d'afficher un message de bienvenue pour le nom d'utilisateur : var userName="jack";

//根据用户名显示欢迎信息
function hello(_name){   
 alert("hello,"+_name);
 }

À l'heure actuelle, il n'est pas possible d'utiliser l'instruction suivante pour retarder l'exécution de la fonction hello de 3 secondes :

window.setTimeout(hello(userName),3000);

Cela entraînera l'exécution immédiate de la fonction hello et transmettra la valeur de retour comme handle d'appel à la fonction setTimeout. Le résultat n'est pas ce dont le programme a besoin. Vous pouvez obtenir le résultat souhaité en utilisant la forme de chaîne :

window.setTimeout("hello(userName)",3000);

La chaîne ici est un morceau de code JavaScript, dans lequel userName représente une variable. Cependant, cette façon d'écrire n'est pas assez intuitive, et dans certains cas il faut utiliser des noms de fonctions. Voici une petite astuce pour appeler une fonction avec des paramètres :

<script language="JavaScript" type="text/javascript"> <!-- var userName="jack";
//根据用户名显示欢迎信息
function hello(_name){    
alert("hello,"+_name);
}
//创建一个函数，用于返回一个无参数函数
function _hello(_name){    
return function(){       
hello(_name);    } }
window.setTimeout(_hello(userName),3000);
 //-->
</script>

这里定义了一个函数_hello，用于接收一个参数，并返回一个不带参数的函数，在这个函数内部使用了外部函数的参数，从而对其调用，不需要使用参数。在window.setTimeout函数中，使用_hello(userName)来返回一个不带参数的函数句柄，从而实现了参数传递的功能。

window对象有两个主要的定时方法，分别是setTimeout 和 setInteval 他们的语法基本上相同，但是完成的功能取有区别。

　　setTimeout方法是定时程序，也就是在什么时间以后干什么。干完了就拉倒。

　　setInterval方法则是表示间隔一定时间反复执行某操作。

　　JS里设定延时：

使用SetInterval和设定延时函数setTimeout 很类似。setTimeout 运用在延迟一段时间，再进行某项操作。

setTimeout("function",time) 设置一个超时对象

setInterval("function",time) 设置一个超时对象

SetInterval为自动重复，setTimeout不会重复。

clearTimeout(对象) 清除已设置的setTimeout对象

clearInterval(对象) 清除已设置的setInterval对象

如果用setTimeout实现setInerval的功能，就需要在执行的程序中再定时调用自己才行。如果要清除计数器需要根据使用的方法不同，调用不同的清除方法：

例如：

tttt=setTimeout('northsnow()',1000);
clearTimeout(tttt);

或者：

tttt=setInterval('northsnow()',1000);
clearInteval(tttt);

举一个例子：

<div id="liujincai">
</div>
<input type="button" name="start" value="start" onclick='startShow();'>
<input type="button" name="stop" value="stop" onclick="stop();">
<script language="javascript">  
var intvalue=1;  
var timer2=null;  
function startShow()  {   
 liujincai.innerHTML=liujincai.innerHTML + " " + (intvalue ++).toString();   
timer2=window.setTimeout("startShow()",2000);  }  
function stop()  {   
 window.clearTimeout(timer2);  
 }
</script>

或者：

<div id="liujincai">
</div>
<input type="button" name="start" value="start" onclick='timer2=window.setInterval("startShow()",2000);//startShow();'>
<input type="button" name="stop" value="stop" onclick="stop();">
<script language="javascript">  
 var intvalue=1;  
var timer2=null;  
 function startShow()  {   
 liujincai.innerHTML=liujincai.innerHTML + " " + (intvalue ++).toString();  
 }  
 function stop()  {   
 window.clearInterval(timer2);  
}
</script>

以上内容是小编给大家介绍的关于JavaScript中SetInterval与setTimeout的用法详解，希望对大家学习SetInterval与setTimeout的相关知识有所帮助。