recherche

Maison >interface Web >js tutoriel >Comment utiliser la méthode setTimeout

Comment utiliser la méthode setTimeout

不言
不言original
2019-01-30 16:26:2122940parcourir

La méthode setTimeout() appellera la fonction après le temps spécifié en millisecondes. La méthode setTimeout nécessite 2 paramètres : une référence à la fonction de rappel et un délai en millisecondes. Dans cet article, nous examinerons setTimeout. méthode.

Comment utiliser la méthode setTimeout

Regardons d'abord la syntaxe de base de setTimeout 

setTimeout(function, milliseconds, param_one, param_two, ...)

Pour arrêter setTimeout et empêcher l'exécution de la fonction, vous devez utiliser clearTimeout () méthode.

La méthode setTimeout() renvoie un identifiant qui peut être utilisé dans la méthode clearTimeout().

Jetons un coup d'œil à un exemple simple

Le code est le suivant

<!DOCTYPE html>
<html>
<body>

<script>
  var sampleVar;
  function sampleFunction(){    
    sampleVar = setTimeout(alertFunc, 2000);
  }
  function alertFunc(){    
    alert("Two seconds have passed!");
  }
  sampleFunction();
</script>

</body>
</html>

Le code ci-dessus ouvrira une fenêtre pop-up après 2 secondes.

Exemple 2

Cet exemple changera le texte de l'élément toutes les 2 secondes (3 fois). Pour ce faire, l'ID d'un élément HTML doit être défini sur "counter".

Le code est le suivant

<!DOCTYPE html>
<html>
<body>

<p>单击下面的按钮。输入字段将显示经过2、4和6秒。</p>

<button onclick="timedText()">Display timed text</button>

<input type="text" id="text">

<script>
function timedText() {
    var x = document.getElementById("text");
    setTimeout(function(){ x.value="2 seconds" }, 2000);
    setTimeout(function(){ x.value="4 seconds" }, 4000);
    setTimeout(function(){ x.value="6 seconds" }, 6000);
}
</script>

</body>
</html>

L'effet d'affichage sur le navigateur est le suivant

Comment utiliser la méthode setTimeout

Lorsque vous cliquez sur le bouton à gauche, il apparaîtra dans la zone de texte Affiche 2, 4, 6 secondes écoulées

Cet échantillon arrêtera le "timeout" si "samplestopfunction" est appelé avant la fin du temps imparti.

Le code est le suivant

<!DOCTYPE html>
<html>
<body>

<p>等待3秒钟后，单击第一个按钮显示“Hi”。</p>
<p>单击第二个按钮以阻止执行第一个函数<br>（必须在3秒钟前单击它）</p>

<button onclick="sampleFunction()">Try it</button>
<button onclick="sampleStopFunction()">Stop the alert</button>

<script>
var sampleVar;

function sampleFunction() {
 sampleVar = setTimeout(function(){ alert("Hi") }, 2000);
}

function sampleStopFunction() {
 clearTimeout(sampleVar);
}
</script>

</body>
</html>

L'effet d'affichage sur le navigateur est le suivant

Comment utiliser la méthode setTimeout

Cet article se termine ici, plus Pour un contenu passionnant, vous pouvez prêter attention aux didacticiels pertinents sur le site Web PHP chinois ! ! !

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!

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：Comment utiliser la méthode setIntervalArticle suivant：Comment utiliser la méthode setInterval

Articles Liés

Voir plus