Comprendre et utiliser les événements de synchronisation JavaScript

Les événements de timing JavaScript jouent un rôle important dans le calcul du temps du site Web. Cet article vous en donnera une certaine compréhension.

Événements de synchronisation JavaScript

En utilisant JavaScript, nous avons la possibilité d'exécuter du code après un intervalle de temps défini, plutôt qu'immédiatement après l'appel de la fonction. Nous appelons cela un événement de timing.

Il est très simple d'utiliser des événements de timing en JavaScript, les deux méthodes clés sont :

setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 在指定的毫秒数后执行指定代码。

Remarque : setInterval() et setTimeout() sont deux méthodes de l'objet HTML DOM Window .

setInterval() 方法
setInterval() 间隔指定的毫秒数不停地执行指定的代码

Syntaxe

window.setInterval("javascript function",milliseconds);
window.setInterval() 方法可以不使用window前缀，直接使用函数setInterval()。
setInterval() 第一个参数是函数（function）。

Le nombre de millisecondes entre le deuxième paramètre

Remarque : 1000 millisecondes correspondent à une seconde.

Exemple

Pop up « bonjour » toutes les trois secondes :

setInterval(function(){alert("Hello")},3000);
实例展示了如何使用 setInterval() 方法，但是每三秒弹出一次对用户体验并不好。

L'exemple suivant affichera l'heure actuelle. La méthode setInterval() définit le code à exécuter toutes les secondes, tout comme une montre.

Instance

Afficher l'heure actuelle

var myVar=setInterval(function(){myTimer()},1000); 
function myTimer(){
    var d=new Date();    var t=d.toLocaleTimeString();    document.getElementById("demo").innerHTML=t;}

Comment arrêter l'exécution ?

La méthode clearInterval() est utilisée pour arrêter le setInterval( ) Code de fonction d'exécution de méthode .

Syntaxe

window.clearInterval(intervalVariable)

window.clearInterval() peut utiliser la fonction clearInterval() directement sans utiliser le préfixe window.

Pour utiliser la méthode clearInterval(), vous devez utiliser une variable globale lors de la création de la méthode de timing :

myVar=setInterval("javascript function",milliseconds);

Ensuite, votre exécution peut être arrêtée à l'aide de la méthode clearInterval().

Exemple

Dans l'exemple suivant, nous avons ajouté le bouton "Stop" :

<p id="demo"></p><button onclick="myStopFunction()">停止</button><script>var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
    var d=new Date();
    var t=d.toLocaleTimeString();
    document.getElementById("demo").innerHTML=t;
}
function myStopFunction(){
    clearInterval(myVar);
}</script>

Méthode setTimeout()

Syntaxe

myVar= window.setTimeout("javascript function", milliseconds);
setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 myVar 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。
setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg。

Le deuxième paramètre indique dans combien de millisecondes le premier paramètre sera exécuté.

Conseil : 1 000 millisecondes équivalent à une seconde.

Instance

Attendez 3 secondes, puis apparaît "Bonjour":

setTimeout(function(){alert("Hello")},3000);

Comment arrêter l'exécution ?

Méthode clearTimeout() est utilisé pour arrêter l'exécution du code de fonction de la méthode setTimeout().

Syntaxe

window.clearTimeout(timeoutVariable)

la méthode window.clearTimeout() n'a pas besoin d'utiliser le préfixe window.

Pour utiliser la méthode clearTimeout(), vous devez utiliser la variable globale dans la méthode du délai de création (setTimeout) :

myVar=setTimeout("javascript function",milliseconds);

Si la fonction n'a pas encore été exécutée, vous pouvez utiliser la méthode clearTimeout() pour arrêter l'exécution du code de fonction.

Exemple

Ce qui suit est le même exemple, mais le bouton "Arrêter l'alerte" est ajouté :

var myVar; 
function myFunction(){
    myVar=setTimeout(function(){alert("Hello")},3000);}
 function myStopFunction(){
    clearTimeout(myVar);}

Cet article explique en détail comment utiliser le timing js événements Pour obtenir des instructions, veuillez faire attention au site Web php chinois pour plus de matériel d'apprentissage.

Recommandations associées :

Comprendre et utiliser les fermetures JavaScript

Comprendre et utiliser les cookies JavaScript

Explications connexes sur la validation des formulaires JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!