Heim > Artikel > Web-Frontend > Die Verwendung von js Timer (Erklärung mit Beispielen)
In diesem Artikel wird hauptsächlich die Verwendung von Timern in js vorgestellt. Freunde in Not können hier als Referenz kommen, ich hoffe, es wird für alle hilfreich sein
In Javascript gibt es zwei spezielle Funktionen für Timer:
1. Countdown-Timer: timename= setTimeout("function();",delaytime);
2. Schleifentimer: timename=setInterval("function();",delaytime);
Der erste Parameter „function( )“ ist der Aktion, die beim Auslösen des Timers ausgeführt werden soll. Es kann sich um eine oder mehrere Funktionen handeln. Die Funktionen können durch „;“ getrennt werden. Wenn Sie beispielsweise zwei Warnfenster anzeigen möchten, können Sie „function();“ durch „alert(‘First warning window!‘); warning(‘Second warning window!‘);“ ersetzen Der zweite Parameter „Verzögerungszeit“ ist die Intervallzeit in Millisekunden, d. h. die Eingabe von „5000“ bedeutet 5 Sekunden.
Der Countdown-Timer löst ein Ereignis aus, nachdem die angegebene Zeit erreicht ist, während der Schleifen-Timer das Ereignis wiederholt auslöst, wenn das Intervall erreicht ist. Der Unterschied zwischen den beiden besteht darin, dass ersterer nur einmal funktioniert, während letzterer kontinuierlich funktioniert.
Nachdem Sie beispielsweise eine Seite geöffnet haben und alle paar Sekunden automatisch zu einer anderen Seite springen möchten, müssen Sie den Countdown-Timer „setTimeout(“function();“,delaytime)“ verwenden Stellen Sie einen Satz so ein, dass jeweils ein Wort angezeigt wird.
erfordert die Verwendung des Schleifentimers „setInterval(“function();“,delaytime)“.
Zum Beispiel: Wenn ("mid" == document.activeElement.id) {alert();}, ist "mid" die ID, die dem Formular entspricht.
wird verwendet, um ein Programm anzugeben, das nach einer bestimmten Zeitspanne ausgeführt werden soll.
setTimeout("function", time) legt ein Timeout-Objekt
SetInterval fest, um es automatisch zu wiederholen. setTimeout wird nicht wiederholt.
clearTimeout(object) löscht das setTimeout-Objekt
clearInterval(object) löscht das setInterval-Objekt
Nur zwei Beispiele.
Kopieren Sie den Code Der Code lautet wie folgt:
Beispiel 2. Wenn der Fokus auf dem Eingabefeld liegt, überprüfen Sie die Eingabefeldinformationen regelmäßig und führen Sie die Prüfaktion nicht aus, wenn der Fokus nicht darauf liegt.<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script language="JavaScript" type="text/javascript"> var str = "这个是测试用的范例文字"; var seq = 0; var second=1000; //间隔时间1秒钟 function scroll() { msg = str.substring(0, seq+1); document.getElementByIdx_x_x('word').innerHTML = msg; seq++; if (seq >= str.length) seq = 0; } </script> </head> <body onload="setInterval('scroll()',second)"> <p id="word"></p><br/><br/> </body> </html>
Code kopieren Der Code lautet wie folgt:
Beispiel 3. Das Folgende ist das einfachste Beispiel. Danach erscheint eine Warnung Das Zeitfenster ist erreicht.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script language="JavaScript" type="text/javascript"> var second=5000; //间隔时间5秒钟 var c=0; function scroll() { c++; if ("b" == document.activeElement.id) { var str="定时检查第<b> "+c+" </b>次<br/>"; if(document.getElementByIdx_x_x('b').value!=""){ str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>"; } document.getElementByIdx_x_x('word').innerHTML = str; } } </script> </head> <body> <textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/> <p id="word"></p><br/><br/> </body> </html>
Code kopieren Der Code lautet wie folgt:
Beispiel 4: Countdown-Zeitsprung<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script language="javascript"> function count() { document.getElementByIdx_x_x('m').innerHTML="计时已经开始!"; setTimeout("alert('十秒钟到!')",10000) } </script> <body> <p id="m"></p> <input TYPE="button" value=" 计时开始" onclick="count()"> </body> </html>
Code kopierenDer Code lautet wie folgt:
<html> <head> <base href="<%=basePath%>"> <title>My JSP 'ds04.jsp' starting page</title> <span id="tiao">3</span> <a href="javascript:countDown"> </a>秒后自动跳转…… <meta http-equiv=refresh content=3;url= '/ds02.jsp'/> <!--脚本开始--> <script language="javascript" type=""> function countDown(secs){ tiao.innerText=secs; if(--secs>0) setTimeout("countDown("+secs+")",1000); } countDown(3); </script> <!--脚本结束--> </head>Beispiel 6:
Code kopierenDer Code lautet wie folgt:
Beispiel 7:<head> <meta http-equiv="refresh" content="2;url='b.html'"> </head>
Kopieren Sie den CodeDer Code lautet wie folgt:
Beispiel 8:<script language="javascript" type="text/javascript"> setTimeout("window.location.href='b.html'", 2000); //下面两个都可以用 //setTimeout("javascript:location.href='b.html'", 2000); //setTimeout("window.location='b.html'", 2000); </script>
Code kopieren Der Code lautet wie folgt:
js timer ( Einmal ausführen, wiederholen)<span id="totalSecond">2</span> <script language="javascript" type="text/javascript"> var second = document.getElementByIdx_x('totalSecond').innerHTML; if(isNaN(second)){ //……不是数字的处理方法 }else{ setInterval(function(){ document.getElementByIdx_x('totalSecond').innerHTML = --second; if (second <= 0) { window.location = 'b.html'; } }, 1000); } </script>
Teilen Sie einen Abschnitt mit JS-Code, einem kleinen Beispiel für einen JS-Timer, unterteilt in einen Timer, der einmal ausgeführt wird, und einen Timer, der wiederholt ausgeführt wird. Als Referenz für Anfänger.
1, ein Timer, der nur einmal ausgeführt wird
Code kopieren Der Code lautet wie folgt:
2 , wiederholt ausführen Der Timer<script> //定时器 异步运行 function hello(){ alert("hello"); } //使用方法名字执行方法 var t1 = window.setTimeout(hello,1000); var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 window.clearTimeout(t1);//去掉定时器 </script>
Code kopieren Der Code lautet wie folgt:
Hinweis:<script> function hello(){ alert("hello"); } //重复执行某个方法 var t1 = window.setInterval(hello,1000); var t2 = window.setInterval("hello()",3000); //去掉定时器的方法 window.clearInterval(t1); </script>
Falls vorhanden Es gibt zwei Methoden auf einer Seite. Beide Methoden werden nach dem Laden der Seite ausgeführt, sie werden jedoch nicht der Reihe nach ausgeführt. Sie können auf die folgenden Methoden zurückgreifen, um das Problem zu lösen:
Sie können der Onload-Methode einen Timer hinzufügen einen Timer und eine „Verzögerung“ für einen bestimmten Zeitraum. Wenn Sie es nach Ablauf der Zeit ausführen, können Sie sich das als Unterscheidung der Reihenfolge des Seitenladens und der Ausführungsmethoden vorstellen.