Detaillierte Erläuterung der Verwendung von SetInterval und setTimeout in JavaScript_Javascript-Kenntnissen

setTimeout

Beschreibung

setTimeout(code,millisec)

Die setTimeout()-Methode wird verwendet, um eine Funktion oder einen berechneten Ausdruck nach einer angegebenen Anzahl von Millisekunden aufzurufen.

Hinweis: Während des Aufrufvorgangs können Sie „clearTimeout(id_of_settimeout)“ verwenden, um

zu beenden

参数	描述
code	必需，要调用的函数后要执行的 JavaScript 代码串。
millisec	必需，在执行代码前需等待的毫秒数。

setTimeinterval

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

参数	描述
code	必需，要调用的函数或要执行的代码串。
millisec	必需，周期性执行或调用code之间的时间间隔，以毫秒计。

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

Verzögerung in JS einstellen:

Die Verwendung von SetInterval ist dem Festlegen 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) legt ein Timeout-Objekt fest. setInterval("function",time) legt ein Timeout-Objekt fest

SetInterval wird automatisch wiederholt und setTimeout wird nicht wiederholt.

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

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

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. Wenn Sie den Funktionsnamen als Aufrufhandle verwenden, 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 „Hallo“ 5 Sekunden nach dem Öffnen der Seite angezeigt wird. 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 die Anzeige auf diese Weise abbrechen möchten, müssen Sie nur auf einen beliebigen Teil der Seite klicken und die Methode window.clearTimeout wird ausgeführt, sodass 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>

Die Übergabe von Parametern an den Timer-Aufruf, unabhängig davon, ob es sich um window.setTimeout oder window.setInterval handelt, kann keine Parameter übernehmen, wenn der Funktionsname als aufrufendes Handle verwendet wird. In vielen Fällen müssen Parameter übernommen werden, was eine Lösung erfordert. Beispielsweise wird sie für die Funktion hello(_name) verwendet, um eine Willkommensnachricht für den Benutzernamen anzuzeigen: var userName="jack";

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

Derzeit ist es nicht möglich, die folgende Anweisung zu verwenden, um die Ausführung der Hallo-Funktion um 3 Sekunden zu verzögern:

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

Dies führt dazu, dass die Hello-Funktion sofort ausgeführt wird und der Rückgabewert als Aufrufhandle an die setTimeout-Funktion übergeben wird. Das Ergebnis entspricht nicht den Anforderungen des Programms. Sie können das gewünschte Ergebnis erzielen, indem Sie die Zeichenfolgenform verwenden:

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

Die Zeichenfolge hier ist ein Stück JavaScript-Code, in dem userName eine Variable darstellt. Allerdings ist diese Schreibweise nicht intuitiv genug und in manchen 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>

这里定义了一个函数_hello，用于接收一个参数，并返回一个不带参数的函数，在这个函数内部使用了外部函数的参数，从而对其调用，不需要使用参数。在window.setTimeout函数中，使用_hello(userName)来返回一个不带参数的函数句柄，从而实现了参数传递的功能。

window对象有两个主要的定时方法，分别是setTimeout 和 setInteval 他们的语法基本上相同，但是完成的功能取有区别。

　　setTimeout方法是定时程序，也就是在什么时间以后干什么。干完了就拉倒。

　　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);

举一个例子：

<div id="liujincai">
</div>
<input type="button" name="start" value="start" onclick='startShow();'>
<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>

或者：

<div id="liujincai">
</div>
<input type="button" name="start" value="start" onclick='timer2=window.setInterval("startShow()",2000);//startShow();'>
<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的相关知识有所帮助。