J'ai appris JS il y a quelques jours et j'ai vu deux fonctions très intéressantes, à savoir la fonction Settimeout et la fonction SetInterval. Ces deux fonctions peuvent faire des pages Web présentes sur des effets très courants sur les pages Web, telles que les carrousels d'image et certains effets très amusants. Apprenons ces deux fonctions ci-dessous!
La syntaxe et l'application d'une fonction Settimeout et de la fonction SetInterval
1.SetTimeout Fonction
Définition et utilisation: la méthode setTimeout () est utilisée pour appeler une fonction ou calculer une expression après le nombre spécifié de millisecondes.
Syntaxe: setTimeout (code, millisec);
paramètre:
Code (requis): la chaîne de code JavaScript à exécuter après la fonction à appeler.
millisec (requis): le nombre de millisecondes à attendre avant d'exécuter le code.
indice:
setTimeout () Exécute le code une seule fois. Si vous souhaitez appeler plusieurs fois, utilisez SetInterval () ou demandez à nouveau le code d'appel lui-même SetTimeout ().
Valeur de retour
Une valeur qui peut être transmise à Window.ClearTimeout () pour annuler l'exécution périodique du code.
Étant donné que Settimeout est une fonction de minuterie, il existe des fonctions pour nettoyer la minuterie, nous utilisons donc la fonction ClearTimeout.
cleartimeout (valeur id renvoyée par setTimeout ());
2.Setinterval Définition
La méthode setInterval () appelle une fonction ou calcule une expression en fonction de la période spécifiée (en millisecondes).
La méthode setInterval () appellera la fonction en continu jusqu'à ce que ClearInterval () soit appelé ou que la fenêtre soit fermée. La valeur ID renvoyée par setInterval () peut être utilisée comme paramètre sur la méthode ClearInterval ().
grammaire
setInterval (code, millisec [, "lang"]);
Le code de paramètre est requis. La fonction à appeler ou la chaîne de code à exécuter.
millisec doit. L'intervalle entre l'exécution périodique ou le code d'appel, en millisecondes
Valeur de retour
Une valeur qui peut être transmise à Window.ClearInterval () pour annuler l'exécution périodique du code.
Étant donné que SetTimeout est une fonction de minuterie, il existe des fonctions pour nettoyer la minuterie, nous utilisons donc la fonction ClearInterval ().
ClearInterval () (valeur ID renvoyée par setInterval ());
2. Cas:
Compte à rebours
<! Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <éad> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <title effets </ title> Méthode JS pour réaliser l'effet de compte à rebours var T1; window.onload = function () {// 01 positionner sur le bouton Démarrer et renvoyer un objet DOM var btns = document.getElementById ('btnstart'); // 02. Enregistrez l'événement Click pour le bouton Démarrer BTNS.OnClick = fonction () {// Exécutez la fonction que le premier paramètre de la fonction SetInterval doit être exécuté régulièrement, et le deuxième paramètre est la fonction qui exécute chaque milliseconde t1 = setInterval (start, 1000); } // 03 Position sur le bouton d'arrêt pour renvoyer un objet DOM var btnst = document.getElementById ('btnstop'); btnst.onclick = function () {ClearInterval (t1); }} // Fonction à exécuter 1 deuxième fonction start () {// 01. Obtenez le texte dans le div pour attribuer à une variable var divdom = document.getElementById ('msg'); var divnum = divdom.innerText; // juger si la valeur de divnum est 0 if (divnum> 0) {divnum--; // réaffecte la valeur soustraite à divnum divdom.innertext = divnum; }} </ script> </ head> <body> <input type = "Button" id = "btnstart" value = "start" /> <input type = "Button" id = "btnstop" value = "stop" /> <r /> <div id = "msg"> 10 </ div> </ body> </ html>Commutation d'image d'arrière-plan:
<! Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <éad> <meta http-equiv = "contenu-type" contenu = "text / html; charmet = utf-8" /> <title> </ title> </ script Type = "Text / Javas"> Varwe 1; // Définissez la variable initiale vers la première image par défaut Window.onLoad = function () {// Définissez la fonction Show chaque seconde en utilisant la fonction de minuterie pour exécuter setInterval (Show, 1000); } // La fonction à exécuter Show () {// si l'image atteint les dernières (5 images), modifiez l'image affichée suivante en la première. Si la dernière image n'est pas atteinte, l'image suivante sera affichée si (count> 5) {count = 1; } else {count ++; } // Obtenez l'objet Dom avec id myimg var dom = document.getElementById ("myimg"); // Modifie le pointage de l'attribut SRC de la balise IMG et modifiez l'image dom.src = "image /" + count + ". Jpg"} </ script> </ head> <body> <img src = "image / 1.jpg" id = "myimg" /> </ body> </ html>Nom de nom
<! Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <éad> <meta http-equiv = "contenu-ype" contenu = "text / html; charmet = utf-8" /> <title> </ title> Array Pour enregistrer les données de base dans les données Namer Var = [«Zhang San», «Li Si», «Wang er», «Xiao Chen», «Xiao Zhang»]; var i = 0; // Déclarer une variable initiale pour permettre à la première personne afficher sur la page par défaut var t1; window.onload = function () {// 02. Obtenez l'objet Dom du bouton Démarrer pour enregistrer l'événement Click pour l'objet var dom = document.getElementById ("myBtn"); dom.onclick = function () {// Utilisez la fonction setInterval pour appeler la fonction de résultat t1 = setInterval (start, 500); // Cette méthode appelle uniquement SetTimeout (stop, 6000); } // Définissez une fonction anonyme pour l'attribuer à un résultat variable var start = function () {// 03get l'objet H1 Tag et attribuez une valeur au texte du tag h1 var domh = document.getElementById ("myh1"); domh.innerText = data [i% data.length]; // remplacer la valeur élémentaire existante i ++; } // appelle la fonction anonyme start (); var stop = function () {// effacer la minuterie ClearInterval (t1); // Les étudiants qui cliquent sur la boîte d'invite apparaissent et répondent alerte ("s'il vous plaît" + document.getElementByid ("myh1"). InnerText + "Réponse des élèves"); }}} </ script> </ head> <body> <h1 id = "myh1"> </h1> <bouton id = "mybtn"> Démarrer l'appel </ bouton> </body> </html>À travers les cas ci-dessus, je crois que tout le monde devrait être familier avec ces deux fonctions.
L'article ci-dessus a une compréhension approfondie de la fonction Settimeout et de la fonction SetInterval. Cet article est tout le contenu que j'ai partagé avec vous. J'espère que cela pourra vous donner une référence et j'espère que vous pourrez soutenir Wulin.com plus.