Utilisation raisonnable du minuteur Item23 dans les compétences JavaScript

En javascript, il existe deux fonctions dédiées aux timers, ce sont :

1. Compte à rebours : timename=setTimeout("function();",delaytime); 2. Minuterie de boucle : timename=setInterval("function();",delaytime
);

1. Aperçu de la minuterie

L'objet window fournit deux méthodes pour implémenter l'effet timer, à 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);

Copier après la connexion

Parmi eux, l'expression peut être un morceau de code entre guillemets, ou il peut s'agir d'un nom de fonction. À l'heure spécifiée, le système appellera automatiquement la fonction. Lorsqu'il utilise le nom de la fonction comme handle d'appel, il peut être utilisé. ne peut contenir aucun paramètre ;Lorsque vous utilisez 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.

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 défini

clearInterval(object) efface l'objet setInterval
Utilisez des minuteries pour implémenter une exécution retardée ou répétée de JavaScript.

2. Utilisation spécifique

1． Méthode window.setTimeout

Cette méthode peut retarder l'exécution d'une fonction, par exemple :

function hello(){ 
  alert("hello"); 
} 
window.setTimeout(hello,5000);

Copier après la connexion

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 s'écrire :

window.setTimeout("hello()",5000);

Copier après la connexion

Les lecteurs peuvent apprécier leurs différences. 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 :

function hello(){ 
   alert("hello"); 
} 
var id=window.setTimeout(hello,5000); 
document.onclick=function(){ 
   window.clearTimeout(id); 
}

Copier après la connexion

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, ce qui 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 :

//定义一个反复执行的调用 
var id=window.setInterval("somefunction",10000); 
//取消定时执行 
window.clearInterval(id);

Copier après la connexion

3. Exercice de démonstration

Le code ci-dessus est uniquement utilisé pour illustrer comment annuler une exécution planifié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 et 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 :

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

Copier après la connexion

3. Transmettre les paramètres à l'appel du minuteur

Qu'il s'agisse de window.setTimeout ou window.setInterval, les paramètres ne peuvent pas être pris lors de l'utilisation du nom de la fonction comme handle d'appel. Dans de nombreux cas, les paramètres doivent être pris, ce qui nécessite une solution. Par exemple, la fonction hello(_name) permet d'afficher le message de bienvenue pour le nom d'utilisateur :

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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 :

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

Copier après la connexion

Une fonction _hello est définie ici, qui sert à recevoir un paramètre et à renvoyer une fonction sans paramètres. Les paramètres de la fonction externe sont utilisés à l'intérieur de cette fonction, afin qu'elle puisse être appelée sans utiliser de paramètres. Dans la fonction window.setTimeout, utilisez _hello(userName) pour renvoyer un handle de fonction sans paramètres, réalisant ainsi la fonction de passage de paramètres.

4. Bien comprendre la fonction « timing » de la minuterie

Premier coup d'oeil à un morceau de code

function display(){
  alert(hello);
}
setTimeout("display()", 3000);
alert("你首先看到的是我！")

Copier après la connexion

代码先输出哪个？答案在程序中很明显。为什么呢？

初学者可能对Javascript的定时器有误解，认为它们是线程，其实Javascript是运行于单线程中的，而定时器仅仅是计划在未来的某个时间执行，而具体的执行时间是不能保证的，因为在页面的生命周期中，不同的时间可能有其它代码在控制Javascript的里进程。浏览器只是负责进行排序，指派某个代码在某个时间点运行。

下面说下Javascript线程，下图表示javascript进程时间线。

除了javascript执行进程外，还有一个需要在进程下一次空闲时间执行的代码队列，随着页面在其生命周期内的推移，代码会按照执行顺序添加到对列中，例如：当一个按钮被按下时，它的事件处理就会添加到队列中，并在下一个可能的时间内执行。

定时器对队列的工作方式是，当特定的时间过去后，将代码插入，注意添加到队列并不意味着它会马上执行，而只能说它会尽快执行，设定一个250ms后执行的定时器，不代表250ms后它会马上执行，它只会表示在250ms后被加入到队列中，如果这个时间点队列是空闲的，那么这段代码就会被执行。

请看以下代码：

var btn = document.getElementById("mybtn");
  btn.onclick = function () {
    setTimeout(function () {
      document.getElementById("message").nodeName = "mymessage";
      //其它代码
    }, 250);
  }

Copier après la connexion

对于定时器最要注意的是：指定的时间间隔表示何时将定时器的代码添加到队列中，而不是何时执行代码。关于这个onclick事伯处理的进程时间线请看下图：