suchen

Heim >Web-Frontend >js-Tutorial >Die Verwendung von js Timer (Erklärung mit Beispielen)

Die Verwendung von js Timer (Erklärung mit Beispielen)

高洛峰
高洛峰Original
2017-02-08 16:21:531514Durchsuche

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)“.

Um den Fokus des Formulars zu erhalten, wird document.activeElement.id verwendet. Verwenden Sie if, um festzustellen, ob document.activeElement.id und die ID des Formulars identisch sind.

Zum Beispiel: Wenn ("mid" == document.activeElement.id) {alert();}, ist "mid" die ID, die dem Formular entspricht.

Timer:

wird verwendet, um ein Programm anzugeben, das nach einer bestimmten Zeitspanne ausgeführt werden soll.

Timing der Ausführung in JS, der Unterschied zwischen setTimeout und setInterval und der Abbruchmethode

setTimeout(Expression, DelayTime), nach DelayTime wird Expression einmal ausgeführt, setTimeout wird zur Verzögerung verwendet eine Zeitspanne lang wieder etwas tun.

setTimeout("function", time) legt ein Timeout-Objekt

setInterval(expression, delayTime) fest. Jedes DelayTime wird häufig zum Aktualisieren von Ausdrücken verwendet ", Zeit) Legen Sie 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.

Beispiel 1. Wenn das Formular ausgelöst oder geladen wird, geben Sie die Zeichenfolge wörtlich aus



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(&#39;word&#39;).innerHTML = msg;
seq++;
if (seq >= str.length) seq = 0;
}
</script>
</head>
<body onload="setInterval(&#39;scroll()&#39;,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(&#39;b&#39;).value!=""){
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x(&#39;b&#39;).value+"</b>";
}
document.getElementByIdx_x_x(&#39;word&#39;).innerHTML = str;
}
}
</script>
</head>
<body>
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval(&#39;scroll()&#39;,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(&#39;m&#39;).innerHTML="计时已经开始！";
setTimeout("alert(&#39;十秒钟到！&#39;)",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 &#39;ds04.jsp&#39; starting page</title>
  <span id="tiao">3</span>
  <a href="javascript:countDown"> </a>秒后自动跳转……
  <meta http-equiv=refresh content=3;url= &#39;/ds02.jsp&#39;/>
  <!--脚本开始-->
  <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=&#39;b.html&#39;"> 
</head>

Kopieren Sie den CodeDer Code lautet wie folgt:

Beispiel 8: 
<script language="javascript" type="text/javascript">
 setTimeout("window.location.href=&#39;b.html&#39;", 2000);
 //下面两个都可以用
 //setTimeout("javascript:location.href=&#39;b.html&#39;", 2000);
 //setTimeout("window.location=&#39;b.html&#39;", 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(&#39;totalSecond&#39;).innerHTML;
 if(isNaN(second)){
  //……不是数字的处理方法
 }else{
  setInterval(function(){
   document.getElementByIdx_x(&#39;totalSecond&#39;).innerHTML = --second;
   if (second <= 0) {
    window.location = &#39;b.html&#39;;
   }
  }, 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.


Code kopieren Der Code lautet wie folgt:

<!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 runat="server">
    <title>Untitled Page</title>
    <script language="javascript" type="text/javascript">
    var YC = new Object();
    function beginYC()
    {
        var secondsYC = document.getElementById("txtYCSeconds").value;
        try
        { 
            YC = setTimeout("alert(&#39;延迟"+secondsYC+"秒成功&#39;)",secondsYC*1000);
        }
        catch(e)
        {
            alert("请输入正确的秒数。");
        }
    }
    function overYC()
    {
        clearTimeout(YC);
        YC=null;
        alert("终止延迟成功。");
    }

/**************************↓↓↓↓定时器的使用↓↓↓↓********************************/

    var timerDS = new Object();
    var timerDDS = new Object();
    function beginDS()
    {
        sn.innerHTML = "0";
        timerDS = setInterval("addOne()",parseInt(document.getElementById("txtIntervalSeconds").value,10)*1000);
    }
    function goonDS()
    {
        timerDS = setInterval("addOne()",parseInt(document.getElementById("txtIntervalSeconds").value,10)*1000);
    }
    function overDS()
    {
        clearInterval(timerDS);
        timerDS=null;
    }
    function delayDS()
    {
        overDS();
        timerDDS = setTimeout("goonDS()",document.getElementById("txtDDSSeconds").value*1000);
    }
    function addOne()
    {
        if(sn.innerHTML=="10")
        {
            overDS();
            alert("恭喜你，已成功达到10秒");
            return;
        }
        sn.innerHTML=parseInt(sn.innerHTML,10)+1;
    }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        延迟器的使用：</div>
    <div>
     <label id="Label2" title="延迟秒数："></label>
        <input type="text" id="txtYCSeconds" value="3" />
        <input type="button" id="btnBYC" onclick="javascript:beginYC()" value="开始延迟" />
        <input type="button" id="btnOYC" onclick="javascript:overYC()" value="终止延迟" />
        <input type="button" id="Button1" onclick="javascript:alert(&#39;good monrning&#39;);" value="普通弹窗" />
    </div>
    <br />
    <div>
        定时器的使用：</div>
    <div>
    <div id="sn">0</div>
    <label id="Label1" title="定时间隔秒数："></label>
        <input type="text" id="txtIntervalSeconds" value="1" />
        <input type="button" id="btnBDS" onclick="javascript:beginDS()" value="启动定时" />
        <input type="button" id="btnODS" onclick="javascript:overDS()" value="终止定时" />
        <input type="button" id="btnGDS" onclick="javascript:goonDS()" value="继续定时" />

        <label id="ds" title="延迟秒数："></label>
        <input type="text" id="txtDDSSeconds" value="5" />
        <input type="button" id="btnDDS" onclick="javascript:delayDS()" value="延迟定时" />

        </div>
    </form>
</body>
</html>

更多js定时器的使用(实例讲解)相关文章请关注PHP中文网！

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Eine kurze Diskussion über Timer in Node.jsNächster Artikel：Eine kurze Diskussion über Timer in Node.js

In Verbindung stehende Artikel

Mehr sehen