Maison >interface Web >js tutoriel >Explication détaillée de l'utilisation de setTimeout() en JavaScript

Explication détaillée de l'utilisation de setTimeout() en JavaScript

黄舟original: 2017-12-04 10:24:432040parcourir

La méthode setTimeout en JavaScript est largement utilisée. Elle est généralement utilisée lors de l'actualisation de la page, d'une exécution retardée, etc. Cependant, de nombreux novices en JavaScript ne savent toujours pas grand-chose sur l'utilisation de setTimeout. Aujourd'hui, je vais vous présenter JavaScript. Explication détaillée de l'utilisation de setTimeout() !

Utilisation de setTimeout

Exécutons un cas ensemble. Ouvrez d'abord le Bloc-notes, collez-y le code suivant et exécutez l'effet !

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<h1> <font color=blue> haorooms博客示范网页 </font> </h1>
<p> 请等三秒!</p>

<script>
setTimeout("alert(&#39;对不起, haorooms博客要你等候多时&#39;)", 3000 )
</script>

</body> 
</html>

La page affichera un cadre photo après y être restée trois secondes ! Ce cas utilise la syntaxe la plus basique de setTimeout, et setTimeout ne sera pas automatiquement répété !

setTimeout peut également exécuter des fonctions, et il peut être exécuté à plusieurs reprises ! Réalisons un autre cas ensemble :

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
var x = 0
function countSecond()
{
   x = x+1
　 document.haorooms.haoroomsinput.value=x
　 setTimeout("countSecond()", 1000)
}
</script>
</head>
<html>
<body>

<form name="haorooms">
   <input type="text" name="haoroomsinput"value="0" size=4 >
</form>

<script>
countSecond()
</script>

</body> </html>

Vous pouvez voir que le nombre dans la zone de texte de saisie augmente chaque seconde ! Par conséquent, setTimeout peut également effectuer des sauts temporels dans les pages Web !

Sans cas, l'apprentissage ne sera pas rapide. Faisons ensemble un autre exemple pour calculer le temps que vous restez sur une certaine page de haorooms :

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
x=0
y=-1
function countMin()
{　y=y+1
　 document.displayMin.displayBox.value=y
　 setTimeout("countMin()",60000)
}
function countSec()
{　x = x + 1
　 z =x % 60
　 document.displaySec.displayBox.value=z
　 setTimeout("countSec()", 1000)
}
</script> </head>
<body>
<table> <tr valign=top> <td> 你在haorooms博客中的停留时间是: </td>
<td> 
<form name=displayMin>
   <input type=text name=displayBox value=0 size=4 >
</form> 
</td>
<td> 分 </td>
<td> 
<form name=displaySec> </td>
<td> <input type=text name=displayBox value=0 size=4 >
</form>
 </td>
<td> 秒。</td> </tr>
 </table>
<script>
countMin()
countSec()
</script>
</body>
</html>

Que diriez-vous d'utiliser l'exemple ci-dessus ? , je pense que vous comprenez l'utilisation de setTimeout() !

Résumé :

Grâce à l'explication ci-dessus, je me demande si vous comprenez setTimeout et si vous serez très habile à utiliser setTimeout la prochaine fois . J'espère que cela vous aidera dans votre travail !

Recommandations associées :

instance setTimeout

Fonction setTimeout() en js

Explication détaillée des exemples d'utilisation de la fonction javascript setTimeout avec des paramètres

Parlons du modèle de boucle d'événements de setTimeout

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：Effet de commutation de diaporama d'image de commutateur JSArticle suivant：Effet de commutation de diaporama d'image de commutateur JS

Articles Liés

Voir plus