JavaScript propose un « » prédéfini clearTimeout () » qui gère la fonctionnalité de délai d'attente. Il permet aux utilisateurs d'annuler l'intervalle de temps préalablement établi par le ' setTimeout ()' fonction. Il arrête l'exécution du bloc de code qui se répète après l'intervalle de temps spécifique. Il est principalement utilisé par les sites Web bancaires et de commerce électronique pour annuler des tâches planifiées.
Cet article expliquera comment gérer la fonction JavaScript clearTimeout().
Comment gérer la fonction JavaScript « clearTimeout() » ?
Le ' clearTimeout ()” annule l’intervalle de temps précédemment réglé à l’aide de la touche “ setTimeout ()' fonction. Le ' setTimeout () » définit l'intervalle de temps pour effectuer une tâche spécifique à plusieurs reprises.
Syntaxe
Le fonctionnement du « clearTimeout () » dépend de sa syntaxe de base qui est écrite ci-dessous :
clearTimeout ( id_of_settimeout )
Selon la syntaxe ci-dessus, le « clearTimeout ()' prend le ' identifiant ' de la ' setTimeout ()” et arrête l’intervalle de temps. Si l'utilisateur ne transmet pas l'identifiant, il n'effectue rien.
Implémentons la fonction définie ci-dessus en utilisant sa syntaxe de base.
Exemple 1 : Application de la fonction « clearTimeout() » pour arrêter l'intervalle de temps défini
Le premier exemple applique le « clearTimeout ()” pour arrêter l’intervalle de temps défini.
Regardez d’abord le code HTML suivant :
< centre >< p > Attendez 2 secondes, la page affichera un en-tête. < / p >
< h2 identifiant = 'H2' >< / h2 >
< bouton sur clic = 'arrêt()' > Arrêtez l'exécution ! < / bouton >
< / centre >
Dans les lignes de code ci-dessus :
- Le « < centre >” définit l’alignement des éléments HTML donnés au centre de la page Web.
- Le « < p >” balise spécifie une instruction de paragraphe.
- Le « < h2 La balise >' est un élément de titre vide avec un identifiant ' H2 ».
- Le « < bouton >' La balise insère l'élément bouton qui appelle le ' arrêt ()' fonction lorsqu'il est attaché ' sur clic ' L'événement est déclenché.
Ensuite, appliquez le « clearTimeout () » en utilisant le bloc de code indiqué :
< scénario >const régler le temps = setTimeout ( commencer , 2000 ) ;
fonction commencer ( ) {
document. getElementById ( 'H2' ) . intérieurHTML = 'Bienvenue sur Linuxhint !'
}
fonction arrêt ( ) {
clearTimeout ( régler le temps ) ;
}
scénario >
Dans l'extrait de code ci-dessus :
- Le ' régler le temps La variable ' applique le ' setTimeout ()' fonction qui passe le ' commencer 'fonctionne comme premier paramètre et le' spécifié nombre de millisecondes » comme deuxième paramètre. Cette fonction exécute le « commencer 'fonctionnent dans un intervalle de temps spécifié.
- Ensuite, définissez le « commencer ()' fonction.
- Dans cette fonction, le « document.getElementById () » est appliquée pour accéder à l’élément d’en-tête vide dont l’identifiant est « H2 » et ajoutez-le à la déclaration textuelle donnée.
- Après cela, le « arrêt () » est définie, qui applique la fonction « clearTimeout () » en passant l’identifiant du « setTimeout ()” pour arrêter son intervalle de temps.
Sortie (avant l'arrêt de l'exécution)
Désormais, la sortie affiche un élément de titre dans un intervalle de temps spécifié avant d'arrêter l'intervalle de temps défini via le ' setTimeout ()' méthode.
Sortie (après l'arrêt de l'exécution)
Le clic sur le bouton donné arrête l'intervalle de temps qui a été défini pour l'affichage de l'élément de titre.
Exemple 2 : Application de la fonction « clearTimeout() » pour arrêter une fonction
Cet exemple utilise le « clearTimeout () » pour arrêter l’exécution d’une fonction :
Tout d’abord, parcourez le code HTML fourni :
< centre >< bouton sur clic = 'commencer()' > Commencez à compter ! < / bouton >
< saisir taper = 'texte' identifiant = 'champ' >
< bouton sur clic = 'arrêt()' > Arrêtez de compter ! < / bouton >
< / centre >
Dans le bloc de code ci-dessus :
- Le « < bouton >' La balise attache le ' sur clic ' pour appeler la fonction ' start () ' lorsqu'on clique dessus.
- Le « < saisir La balise > » ajoute un champ de saisie du type « texte » et un « champ » d'identification.
- Le prochain « < bouton > » joint également le « sur clic ' événement pour appeler le ' arrêt () » lorsque cet événement est déclenché.
Maintenant, appliquez le « clearTimeout () » en utilisant ces lignes de code :
< scénario >laisser contrer = 0 ;
laissez setTime ;
laisser timer_on = 0 ;
fonction compter ( ) {
document. getElementById ( 'champ' ) . valeur = comptoir ;
comptoir ++ ;
régler le temps = setTimeout ( compter , 1000 ) ;
}
fonction commencer ( ) {
si ( ! Décompte activé ) {
Décompte activé = 1 ;
compter ( ) ;
}
}
fonction arrêt ( ) {
clearTimeout ( régler le temps ) ;
Décompte activé = 0 ;
}
scénario >
Dans les lignes de code ci-dessus :
- Premièrement, le « laisser ' Le mot-clé déclare trois variables ' compteur', 'setTime' et 'timer_on ».
- Ensuite, le « compter () » est définie.
- Dans ses définitions, le « document.getElementById() 'La méthode est appliquée pour accéder au champ de saisie ajouté en utilisant son identifiant' champ ' et ajoutez-le avec la valeur du ' comptoir » variables.
- Maintenant, incrémentez la valeur du ' comptoir » variables.
- Enfin, appliquez le « setTimeout () » pour effectuer l’exécution de « compter ()” fonction dans un intervalle de temps donné.
- Après cela, définissez une fonction nommée « commencer () ».
- Dans cette fonction, un « si ' L'instruction est utilisée pour spécifier une condition, c'est-à-dire si ' imer_on ' n'est pas ' sur ' alors c'est égal à ' 1 ' et le ' compter () » est appelée.
- Maintenant, une autre fonction est définie nommée « arrêt () ».
- Dans sa définition, le « clearTimeout ()' est appliquée en transmettant l'identifiant du ' setTimeout ()' méthode c'est-à-dire ' régler le temps ».
Sortir
On peut observer que le « Décompte de départ ' Le bouton démarre le décompte qui s'incrémente toutes les 1 seconde. Ce décompte s'arrête en cliquant sur le ' Arrêtez de compter ! ' bouton.
Il s’agit de gérer la fonction clearTimeout() en JavaScript.
Conclusion
Le ' clearTimeout () » gère l'intervalle de temps spécifié à l'aide de « setTimeout ()' fonction. Il effectue cette tâche en transmettant l'identifiant du 'setTimeout()' fonctionner comme son paramètre essentiel. Il est utilisé pour l'annulation des tâches effectuées dans l'intervalle de temps spécifié qui a été défini à l'aide du « setTimeout ()' fonction. Cet article a pratiquement expliqué la procédure pour gérer la fonction JavaScript clearTimeout().