Detaillierte Erläuterung der Verwendung von SetInterval und setTimeout in JavaScript

setTimeout

Beschreibung

setTimeout(code, millisec)

setTimeout()-Methode wird verwendet, um anzugeben Anzahl der Millisekunden, nach denen eine Funktion oder ein berechneter Ausdruck aufgerufen werden soll.

Hinweis: Während des Aufrufvorgangs können Sie mit clearTimeout(id_of_settimeout)

setTimeinterval

setInterval(code,millisec[,"lang"])

Die Methode setInterval() kann eine Funktion aufrufen oder einen Ausdruck entsprechend dem angegebenen Zeitraum (in Millisekunden) berechnen.

Einstellen der Verzögerung in JS:

Die Verwendung von SetInterval ist dem Einstellen der Verzögerungsfunktion setTimeout sehr ähnlich. setTimeout wird verwendet, um die Ausführung einer Operation um einen bestimmten Zeitraum zu verzögern.

setTimeout("function",time) Setzt ein Timeout-Objekt setInterval("function",time) Setzt ein Timeout-Objekt

SetInterval wird automatisch wiederholt, setTimeout wird nicht wiederholt.

clearTimeout(object) löscht das setTimeout-Objekt. clearInterval(object) löscht das setInterval-Objekt.

Die Methode setInterval() kann die Funktion entsprechend dem angegebenen Zeitraum (in Millisekunden) aufrufen oder Ausdrücke auswerten.

Verwenden Sie einen Timer, um eine verzögerte oder wiederholte Ausführung von JavaScript zu implementieren. Das Fensterobjekt bietet zwei Methoden, um den Effekt des Timers zu erzielen, nämlich window.setTimeout() und window.setInterval. Ersteres kann dazu führen, dass ein Codeabschnitt nach einer bestimmten Zeit ausgeführt wird, während Letzterer dazu führen kann, dass ein Codeabschnitt zu jedem angegebenen Zeitpunkt einmal ausgeführt wird. Ihre Prototypen lauten wie folgt: window.setTimeout(expression,milliseconds); window.setInterval(expression,milliseconds); Wenn die Zeit erreicht ist, wird die Funktion automatisch aufgerufen. Bei Verwendung des Funktionsnamens als Aufrufhandle können keine Parameter verwendet werden. Bei Verwendung einer Zeichenfolge können Sie die zu übergebenden Parameter darin schreiben. Der zweite Parameter der beiden Methoden ist Millisekunden, was die Anzahl der Millisekunden für die Verzögerung oder wiederholte Ausführung darstellt.

Die beiden Methoden werden im Folgenden vorgestellt.

1. window.setTimeout-Methode Diese Methode kann die Ausführung einer Funktion verzögern, zum Beispiel:

<script language="JavaScript" type="text/javascript">
<!--
 function hello(){ alert("hello"); } window.setTimeout(hello,5000);
//-->
 </script>

Dieser Code bewirkt, dass das Dialogfeld 5 Sekunden lang angezeigt wird nach dem Öffnen der Seite. Der letzte Satz kann auch wie folgt geschrieben werden: window.setTimeout("hello()",5000); Leser können ihre Unterschiede erkennen, die auch in der Methode window.setInterval vorhanden sind. Wenn Sie die verzögerte Ausführung abbrechen, bevor der Verzögerungszeitraum erreicht ist, können Sie die Methode window.clearTimeout(timeoutId) verwenden, die eine ID erhält, die einen Timer darstellt. Diese ID wird von der setTimeout-Methode zurückgegeben, zum Beispiel:

<script language="JavaScript" type="text/javascript">
<!--
function hello(){   
alert("hello");
}
var id=window.setTimeout(hello,5000);
document.onclick=function(){   
window.clearTimeout(id);
 }
//-->
</script>

Wenn Sie auf diese Weise die Anzeige abbrechen möchten, klicken Sie einfach auf einen beliebigen Teil der Seite und es wird ausgeführt. Die Methode window.clearTimeout bewirkt, dass der Timeout-Vorgang abgebrochen wird.

2． window.setInterval-Methode Diese Methode bewirkt, dass zu jedem festgelegten Zeitpunkt eine Funktion aufgerufen wird, und ist eine sehr verbreitete Methode. Wenn Sie die geplante Ausführung abbrechen möchten, können Sie ähnlich wie bei der Methode „clearTimeout“ die Methode „window.clearInterval“ aufrufen. Die Methode „clearInterval“ erhält außerdem einen von der Methode „setInterval“ zurückgegebenen Wert als Parameter. Beispiel: //Definieren Sie einen Aufruf, der wiederholt ausgeführt werden soll. var id=window.setInterval("somefunction",10000); //Geplante Ausführung abbrechen window.clearInterval(id); geplante Ausführung. Tatsächlich muss die setInterval-Methode bei vielen Gelegenheiten verwendet werden. Im Folgenden entwerfen wir eine Stoppuhr, um die Verwendung der setInterval-Funktion vorzustellen: Die Stoppuhr enthält zwei Schaltflächen und ein Textfeld zur Anzeige der Zeit. Wenn Sie auf die Schaltfläche „Start“ klicken, beginnt die Zeitmessung. Die Mindesteinheit beträgt 0,01 Sekunden. Durch erneutes Klicken auf die Schaltfläche wird die Zeitmessung gestoppt und im Textfeld wird die verstrichene Zeit angezeigt. Mit einer weiteren Taste lässt sich die aktuelle Uhrzeit auf Null zurücksetzen. Der Implementierungscode lautet wie folgt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head>
 <title> New Document </title>
 </head> 
<body> 
<form action="somepage.asp"> 
<input type="text" value="0" name="txt1"/> 
<input type="button" value="开始" name="btnStart"/> 
<input type="button" value="重置" name="btnReset"/> 
</form> 
</body> 
</html>

<script language="JavaScript" type="text/javascript">
<!--
//获取表单中的表单域
var txt=document.forms[0].elements["txt1"];
 var btnStart=document.forms[0].elements["btnStart"];
 var btnReset=document.forms[0].elements["btnReset"]
 //定义定时器的id
var id;
//每10毫秒该值增加1
var seed=0;
btnStart.onclick=function(){   
//根据按钮文本来判断当前操作   
 if(this.value=="开始"){       
 //使按钮文本变为停止       
 this.value="停止";       
//使重置按钮不可用       
 btnReset.disabled=true;       
//设置定时器，每0.01s跳一次       
id=window.setInterval(tip,10);    }
else{       
//使按钮文本变为开始       
this.value="开始";       
//使重置按钮可用       
 btnReset.disabled=false;       
//取消定时       
window.clearInterval(id);   
 } }
//重置按钮
btnReset.onclick=function(){   
seed=0;
 }
//让秒表跳一格
 function tip(){  
  seed++;   
 txt.value=seed/100;
}
//-->
</script>

Übergeben Sie Parameter an den Timer-Aufruf, unabhängig davon, ob es sich um window.setTimeout oder window.setInterval handelt, wenn Sie die Funktion verwenden Name als aufrufendes Handle. Keiner von ihnen kann Parameter annehmen, aber in vielen Situationen müssen sie Parameter annehmen, also müssen wir einen Weg finden, das Problem zu lösen. Beispielsweise wird die Funktion hello(_name) verwendet, um die Willkommensnachricht für den Benutzernamen anzuzeigen: var userName="jack";

//根据用户名显示欢迎信息
function hello(_name){   
 alert("hello,"+_name);
 }

At Dieses Mal ist der Versuch, die Ausführung der Hallo-Funktion mit der folgenden Anweisung um 3 Sekunden zu verzögern, nicht möglich:

window.setTimeout(hello(userName),3000);

This führt dazu, dass die Funktion „Hallo“ sofort ausgeführt wird und der Rückgabewert als Aufrufhandle an die Funktion „setTimeout“ übergeben wird. Das Ergebnis entspricht nicht den Anforderungen des Programms. Das gewünschte Ergebnis kann durch die Verwendung der Zeichenfolgenform erreicht werden:

window.setTimeout("hello(userName)",3000);

Die Zeichenfolge hier ist ein Stück JavaScript-Code, in dem userName stellt eine Variable dar. Diese Schreibweise ist jedoch nicht intuitiv genug und in einigen Fällen müssen Funktionsnamen verwendet werden. Hier ist ein kleiner Trick, um eine Funktion mit Parametern aufzurufen:

<script language="JavaScript" type="text/javascript"> <!-- var userName="jack";
//根据用户名显示欢迎信息
function hello(_name){    
alert("hello,"+_name);
}
//创建一个函数，用于返回一个无参数函数
function _hello(_name){    
return function(){       
hello(_name);    } }
window.setTimeout(_hello(userName),3000);
 //-->
</script>

Hier wird eine Funktion _hello definiert, um einen Parameter zu empfangen und eine Funktion ohne Parameter zurückzugeben. Die Parameter der externen Funktion werden innerhalb dieser Funktion verwendet, sodass sie ohne Verwendung von Parametern aufgerufen wird. Verwenden Sie in der Funktion window.setTimeout _hello (Benutzername), um ein Funktionshandle ohne Parameter zurückzugeben und so die Parameterübergabefunktion zu realisieren.

Das Fensterobjekt verfügt über zwei Haupt-Timing-Methoden, nämlich setTimeout und setInteval. Ihre Syntax ist grundsätzlich dieselbe, aber die abgeschlossenen Funktionen sind unterschiedlich.

Die setTimeout-Methode ist ein Timing-Programm, das heißt, was nach einer bestimmten Zeit zu tun ist. Ziehen Sie es nach unten, wenn Sie fertig sind.

　　setInterval方法则是表示间隔一定时间反复执行某操作。

　　JS里设定延时：

使用SetInterval和设定延时函数setTimeout 很类似。setTimeout 运用在延迟一段时间，再进行某项操作。

setTimeout("function",time) 设置一个超时对象

setInterval("function",time) 设置一个超时对象

SetInterval为自动重复，setTimeout不会重复。

clearTimeout(对象) 清除已设置的setTimeout对象

clearInterval(对象) 清除已设置的setInterval对象

如果用setTimeout实现setInerval的功能，就需要在执行的程序中再定时调用自己才行。如果要清除计数器需要根据使用的方法不同，调用不同的清除方法：

例如：

tttt=setTimeout('northsnow()',1000);
clearTimeout(tttt);

或者：

tttt=setInterval('northsnow()',1000);
clearInteval(tttt);

举一个例子：

<p id="liujincai">
</p>
<input type="button" name="start" value="start" onclick=&#39;startShow();&#39;>
<input type="button" name="stop" value="stop" onclick="stop();">
<script language="javascript">  
var intvalue=1;  
var timer2=null;  
function startShow()  {   
 liujincai.innerHTML=liujincai.innerHTML + " " + (intvalue ++).toString();   
timer2=window.setTimeout("startShow()",2000);  }  
function stop()  {   
 window.clearTimeout(timer2);  
 }
</script>

或者：

<p id="liujincai">
</p>
<input type="button" name="start" value="start" onclick=&#39;timer2=window.setInterval("startShow()",2000);//startShow();&#39;>
<input type="button" name="stop" value="stop" onclick="stop();">
<script language="javascript">  
 var intvalue=1;  
var timer2=null;  
 function startShow()  {   
 liujincai.innerHTML=liujincai.innerHTML + " " + (intvalue ++).toString();  
 }  
 function stop()  {   
 window.clearInterval(timer2);  
}
</script>

以上内容是小编给大家介绍的关于JavaScript中SetInterval与setTimeout的用法详解，希望对大家学习SetInterval与setTimeout的相关知识有所帮助。

更多JavaScript中SetInterval与setTimeout的用法详解相关文章请关注PHP中文网！