Comment utiliser la méthode setTimeout-js tutoriel-php.cn

Comment utiliser la méthode setTimeout

不言

Libérer： 2019-01-30 16:26:21

original

22837 Les gens l'ont consulté

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, ...)

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!