interface Web
js tutoriel
Comment puis-je modifier l'intervalle de la méthode setinterval() lors de l'exécution à l'aide de JavaScript ?
Comment puis-je modifier l'intervalle de la méthode setinterval() lors de l'exécution à l'aide de JavaScript ?
La méthode
setInterval() est utilisée pour appeler un bloc de code spécifique encore et encore après un intervalle de temps spécifique spécifié comme paramètre entre parenthèses. La méthode setInterval() accepte deux paramètres. Le premier paramètre est le code qui doit être exécuté à plusieurs reprises et le deuxième paramètre est l'heure à laquelle le code doit être à nouveau exécuté.
Dans cet article, nous apprendrons comment modifier l'intervalle de temps de la méthode setInterval() au moment de l'exécution. De cette façon, il exécutera le code donné à intervalles irréguliers ou variables.
JavaScript nous fournit deux méthodes intégrées différentes pour modifier l'intervalle de temps de la méthode setInterval() comme indiqué ci-dessous -
Utilisez la méthode clearInterval().
Utilisez la méthode setTimeout().
Apprenons-en davantage sur le principe de fonctionnement et la mise en œuvre de ces deux méthodes respectivement.
Utilisez la méthode clearInterval()
La méthodeclearInterval() est utilisée pour effacer ou arrêter la fonction setInterval() précédemment exécutée. Nous pouvons utiliser cette méthode pour modifier l'intervalle de temps de la méthode seInterval() en appelant cette fonction à l'intérieur de la fonction passée à setInterval() et elle effacera la méthode setInterval() précédemment appelée et utilisera la nouvelle que nous définirons dans le code. valeur temporelle.
Grammaire
La syntaxe suivante vous montrera comment utiliser la méthode clearInterval() pour effacer la méthode setInterval() précédente -
clearInterval( code to be executed, time interval );
Comprenons réellement cette méthode et modifions le timing de la méthode setInterval() à l'aide de la méthode clearInterval() en JavaScript.
Algorithme
Étape 1 - Dans la première étape, nous ajouterons deux boutons différents dans le document HTML, un pour démarrer l'intervalle et un autre pour arrêter l'intervalle. < /p>
Étape 2 - Dans cette étape, nous obtiendrons tous les éléments requis du document HTML en utilisant les identifiants en JavaScript pour y apporter des modifications.
Étape 3 - Dans l'étape suivante, nous définirons une fonction JavaScript où nous effaçons d'abord le setInterval() précédent en utilisant la méthode clearInterval(), puis avec une nouvelle valeur et à nouveau en utilisant la fonction que nous avons définie dans cette étape. Appelons setInterval () méthode.
Étape 4 - Dans la dernière étape, nous définirons une autre fonction JavaScript pour arrêter l'exécution de setInterval() à l'aide de la méthode clearInterval().
Exemple
Les exemples ci-dessous vous aideront à réellement comprendre l'algorithme ci-dessus en approfondissant le code -
<html>
<body>
<h2>Change the Time Interval of setinterval() Method at RunTime using JavaScript</h2>
<p id = "upper">The below text will print after a certain irregular interval of time every time.</p>
<button id = "btn" onclick = "start()"> Start Printing </button>
<button id = "stopbtn" onclick = "stop()"> Stop Printing </button>
<p id = "print1"> </p>
<p id = "result"> </p>
<p id = "print2"> </p>
<script>
var result = document.getElementById("result");
var upper = document.getElementById("upper");
var printVal1 = document.getElementById("print1");
var printVal2 = document.getElementById("print2");
var interval, t = 500;
function start() {
printVal1.innerHTML = " Printing Starts: ";
clearInterval(interval);
result.innerHTML += " Printed after: <b> " + t + " </b> time. <br> ";
t = t * 2;
interval = setInterval(start, t);
}
function stop() {
printVal2.innerHTML = " Printing Ends. ";
clearInterval(interval);
}
</script>
</body>
</html>
Dans l'exemple ci-dessus, nous utilisons la méthode clearInterval() pour modifier l'intervalle de temps de la méthode setInterval() lors de l'exécution à l'aide de JavaScript.
Utilisez la méthode setTimeout()
La méthodesetTimeout() est similaire à la méthode setInterval(). Il appelle également un morceau de code après un intervalle spécifique, mais contrairement à setInterval(), il n'exécute le code qu'une seule fois au lieu de plusieurs fois. La méthode setTimeout() s'arrêtera automatiquement après avoir exécuté le code une fois, nous n'avons donc pas besoin d'appeler la méthode clearInterval() comme la méthode setInterval() pour arrêter l'exécution de l'intervalle de temps précédent.
Grammaire
Utilisez la méthode setTimeout() pour modifier l'intervalle de temps selon la syntaxe suivante -
setTimeout( code to be executed, time interval );
Voyons maintenant l'implémentation réelle de cette méthode à l'aide d'un exemple de code JavaScript.
Algorithme
L'algorithme de cette méthode est presque le même que la méthode précédente. Il vous suffit d'effectuer quelques petites modifications comme indiqué ci-dessous -
Supprimez la méthode clearInterval() de la fonction start() de l'algorithme précédent.
Utilisez la méthode setTimeout() pour définir la valeur de la variable d'intervalle au lieu de la méthode setInterval() avec les mêmes paramètres.
Exemple
L'exemple ci-dessous expliquera l'utilisation pratique de la méthode setTimeout et vous aidera à comprendre les modifications ci-dessus dans l'algorithme précédent que vous devez effectuer -
<html>
<body>
<h2>Change the Time Interval of setinterval() Method at RunTime using JavaScript</h2>
<p id = "upper">The below text will print after a certain irregular interval of time every time.</p>
<button id = "btn" onclick = "start()">Start Printing</button>
<button id = "stopbtn" onclick = "stop()">Stop Printing</button>
<p id = "print1"> </p>
<p id = "result"> </p>
<p id = "print2"> </p>
<script>
var result = document.getElementById("result");
var upper = document.getElementById("upper");
var printVal1 = document.getElementById("print1");
var printVal2 = document.getElementById("print2");
var interval, t = 500;
function start() {
printVal1.innerHTML = " Printing Starts: ";
result.innerHTML += " Printed after: <b> " + t + " </b> time. <br> ";
t = t * 2;
interval = setTimeout(start, t);
}
function stop() {
printVal2.innerHTML = " Printing Ends. ";
clearInterval(interval);
}
</script>
</body>
</html>
Dans cet exemple, nous utilisons la méthode setTimeout() de JavaScript pour modifier l'intervalle de temps entre chaque appel au moment de l'exécution à l'aide de JavaScript.
Dans cet article, nous avons découvert deux manières différentes de modifier l'intervalle de temps à l'aide de la méthode setInterval(). Nous discutons des deux approches en détail avec la théorie requise et la mise en œuvre pratique à l'aide d'exemples de code distincts pour chaque approche.
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment créer et publier mes propres bibliothèques JavaScript?
Mar 18, 2025 pm 03:12 PM
L'article discute de la création, de la publication et du maintien des bibliothèques JavaScript, en se concentrant sur la planification, le développement, les tests, la documentation et les stratégies de promotion.
Comment optimiser le code JavaScript pour les performances dans le navigateur?
Mar 18, 2025 pm 03:14 PM
L'article traite des stratégies pour optimiser les performances JavaScript dans les navigateurs, en nous concentrant sur la réduction du temps d'exécution et la minimisation de l'impact sur la vitesse de chargement de la page.
Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal?
Apr 04, 2025 pm 02:42 PM
Des questions et des solutions fréquemment posées pour l'impression de billets thermiques frontaux pour le développement frontal, l'impression de billets est une exigence commune. Cependant, de nombreux développeurs mettent en œuvre ...
Comment déboguer efficacement le code JavaScript à l'aide d'outils de développeur de navigateur?
Mar 18, 2025 pm 03:16 PM
L'article traite du débogage efficace de JavaScript à l'aide d'outils de développeur de navigateur, de se concentrer sur la définition des points d'arrêt, de l'utilisation de la console et d'analyser les performances.
Qui est payé plus de python ou de javascript?
Apr 04, 2025 am 12:09 AM
Il n'y a pas de salaire absolu pour les développeurs Python et JavaScript, selon les compétences et les besoins de l'industrie. 1. Python peut être davantage payé en science des données et en apprentissage automatique. 2. JavaScript a une grande demande dans le développement frontal et complet, et son salaire est également considérable. 3. Les facteurs d'influence comprennent l'expérience, la localisation géographique, la taille de l'entreprise et les compétences spécifiques.
Comment utiliser les cartes source pour déboguer le code JavaScript minifié?
Mar 18, 2025 pm 03:17 PM
L'article explique comment utiliser les cartes source pour déboguer JavaScript minifiée en le mappant au code d'origine. Il discute de l'activation des cartes source, de la définition de points d'arrêt et de l'utilisation d'outils comme Chrome Devtools et WebPack.
La différence dans Console.Log de sortie Résultat: Pourquoi les deux appels sont-ils différents?
Apr 04, 2025 pm 05:12 PM
Discussion approfondie des causes profondes de la différence de sortie Console.log. Cet article analysera les différences dans les résultats de sortie de la fonction Console.log dans un morceau de code et expliquera les raisons derrière. � ...
TypeScript pour les débutants, partie 2: Types de données de base
Mar 19, 2025 am 09:10 AM
Une fois que vous avez maîtrisé le didacticiel TypeScript de niveau d'entrée, vous devriez être en mesure d'écrire votre propre code dans un IDE qui prend en charge TypeScript et de le compiler en JavaScript. Ce tutoriel plongera dans divers types de données dans TypeScript. JavaScript a sept types de données: null, non défini, booléen, numéro, chaîne, symbole (introduit par ES6) et objet. TypeScript définit plus de types sur cette base, et ce tutoriel les couvrira tous en détail. Type de données nuls Comme javascript, null en typeScript
