Ich habe vor ein paar Tagen JS gelernt und zwei sehr interessante Funktionen gesehen, nämlich die SetTimeout -Funktion und die SetInterval -Funktion. Diese beiden Funktionen können Webseiten auf Webseiten wie Bildkarusseln und einige sehr unterhaltsame Effekte vorstellen. Lassen Sie uns unten über diese beiden Funktionen erfahren!
Die Syntax und Anwendung einer SetTimeout -Funktion und SetInterval -Funktion
1.Settimeout -Funktion
Definition und Verwendung: Die SetTimeOut () -Methode wird verwendet, um eine Funktion aufzurufen oder einen Ausdruck nach der angegebenen Anzahl von Millisekunden zu berechnen.
Syntax: setTimeout (Code, Millisec);
Parameter:
Code (erforderlich): Die JavaScript -Code -Zeichenfolge, die nach dem aufgerufenen Funktion ausgeführt wird.
Millisec (erforderlich): Die Anzahl der Millisekunden zum Warten, bevor Sie den Code ausführen.
Hinweis:
setTimeout () führt Code nur einmal aus. Wenn Sie mehrmals anrufen möchten, verwenden Sie setInterval () oder führen Sie den Code selbst Call setTimeout () erneut.
Rückgabewert
Ein Wert, der an das Fenster übergeben werden kann
Da SetTimeOut eine Timer -Funktion ist, gibt es Funktionen zum Aufräumen des Timers, sodass wir die ClearTimeout -Funktion verwenden.
ClearTimeOut (ID -Wert von setTimeout ());
2.SetInterval Definition
Die Methode setInterval () ruft eine Funktion auf oder berechnet einen Ausdruck gemäß dem angegebenen Zeitraum (in Millisekunden).
Die setInterval () -Methode ruft die Funktion kontinuierlich auf, bis ClearInterval () aufgerufen oder das Fenster geschlossen ist. Der von setInterval () zurückgegebene ID -Wert kann als Parameter für die Methode clearInterval () verwendet werden.
Grammatik
setInterval (Code, Millisec [, "Lang"]);
Parametercode ist erforderlich. Die zugenannte Funktion oder die zu ausgeführte Codezeichenfolge.
Millisec muss. Das Intervall zwischen periodischer Ausführung oder Anrufcode in Millisekunden
Rückgabewert
Ein Wert, der an Fenster übergeben werden kann
Da SetTimeOut eine Timer -Funktion ist, gibt es Funktionen zum Aufräumen des Timers, sodass wir die Funktion clearInterval () verwenden.
ClearInterval () (ID -Wert, der von setInterval ()) zurückgegeben wird;
2. Fall:
Countdown -Effekt
<! DocType html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> </> </> </> </> </tectyps> </> </> </> </tectyps> </> </> </> </> </tectyps> </> </> </> </> </tectyps> </> </> </> </> </> </> </> </tectyps> </> </> </> </> </> </> </> </tection " JS -Methode zur Erreichung des Countdown -Effekts var t1; window.onload = function () {// 01 Position zur Startschaltfläche und zurückgibt ein DOM -Objekt var btns = document.getElementById ('btnstart'); // 02. Registrieren Sie das Klickenereignis für die Schaltfläche Start btns.onclick = function () {// Führen Sie die Funktion aus, dass der erste Parameter der SetInterval -Funktion regelmäßig ausgeführt werden soll, und der zweite Parameter ist die Funktion, die jede Millisekunden t1 = setInterval ausführt (Start, 1000). } // 03 Position zur Stop -Taste, um ein DOM -Objekt var btnst = document.getElementById ('btnstop') zurückzugeben; btnst.onclick = function () {clearInterval (t1); }} // Funktion zur Ausführung 1 Sekunden Funktion start () {// 01. Holen Sie sich den Text im DIV, um einer variablen var divdomy = document.getElementById ('msg') zuzuweisen. var divnum = divdom.innertext; // beurteilen, ob der Wert von Divnum 0 ist, wenn (Divnum> 0) {Divnum--; // den subtrahierten Wert zu Divnum Divdomy zuweisen. }} </script> </head> <body> <Eingabe type = "button" id = "btnstart" value = "start"/> <Eingabe type = "button" id = "btnstop" value = "stop"/> <br/> <div id = "msg"> 10 </div> </body> </html>Hintergrundbildschalter:
<! DocType html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> </citles> </citles> </tection> </tection "text" utf-8 "/> </tection> </citles> </tection> </tection> </citles> </tection> </citles> </tection> </citles> </tection> </tection> </tection" text ". 1; // Definieren Sie die anfängliche Variable für das erste Fenster des ersten Bildes. } // Die Funktion, die ausgeführt wird, show () {// Wenn das Bild die letzten (5 Bilder) erreicht, ändern Sie das nächste angezeigte Bild auf das erste. Wenn das letzte Bild nicht erreicht ist, wird das nächste Bild angezeigt, wenn (count> 5) {count = 1; } else {count ++; } // das DOM -Objekt mit ID myimg var document = document.getElementById ("myimg") abrufen; // Ändern Sie das SRC -Attribut des IMG -Tags und ändern Sie das Bild dom.src = "Image/"+count+".Nennen Sie Anrufer
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript"> //Define an Array zum Speichern der grundlegenden Daten in der Namer var data = ['zhang san', 'li si', 'wang er', 'xiao chen', 'xiao zhang']; var i = 0; // deklarieren Sie eine anfängliche Variable, um die erste Person standardmäßig auf der Seite anzeigen zu lassen. window.onload = function () {// 02. Erhalten Sie das DOM-Objekt der Schaltfläche "Start-name", um das Klickenereignis für das Object VAR DOCUM = DOCUMENT.GetElementById ("myBtn") zu registrieren. dom.onclick = function () {// Verwenden Sie die Funktion "setInterval", um die Ergebnisfunktion t1 = setInterval (Start, 500); // Diese Methode ruft nur SetTimeout auf (Stop, 6000); } // Definieren Sie eine anonyme Funktion, um sie einem variablen Ergebnis zuzuweisen var start = function () {// 03Get das H1 -Tag -Objekt und weisen Sie dem Text des H1 -Tags var domorh = document.getElementById ("myh1") einen Wert zu). DOMH.InNERTEXT = Daten [i % Data.Length]; // Bestehende Elementwert i ++ ersetzen; } // Die anonyme Funktion start () rufen; var stop = function () {// Löschen Sie den Timer ClearInterval (T1); // Schüler, die auf das Eingabeaufforderung Box klicken, tauchen auf und beantworten Alert ("bitte" + document.getElementById ("myh1"). InnerText + "Schüler antworten"); }}} </script> </head> <body> <h1 id = "myh1"> </h1> <button id = "myBtn"> Starten Sie </button> </body> </html>In den oben genannten Fällen sollte jeder mit diesen beiden Funktionen vertraut sein.
Der obige Artikel hat ein tiefes Verständnis der SetTimeout -Funktion und der SetInterval -Funktion. Dieser Artikel ist der gesamte Inhalt, den ich mit Ihnen geteilt habe. Ich hoffe, es kann Ihnen eine Referenz geben und ich hoffe, Sie können Wulin.com mehr unterstützen.