Timer-Nutzung von SetInterval und setTimeout in Javascript

Die Methode setTimeout() wird verwendet, um eine Funktion oder einen berechneten Ausdruck nach einer angegebenen Anzahl von Millisekunden aufzurufen, während setInterval() eine Schleife durchläuft, um eine Funktion oder einen Ausdruck alle angegebene Anzahl von Millisekunden aufzurufen, bis clearInterval sie löscht. Mit anderen Worten, setTimeout() wird nur einmal ausgeführt und setInterval() kann mehrmals ausgeführt werden. Die Parameter der beiden Funktionen sind ebenfalls gleich. Der erste Parameter ist der auszuführende Code oder Handle, und der zweite Parameter ist die Anzahl der zu verzögernden Millisekunden.

setTimeOut-Verwendung

Die Verwendung der setTimeout-Funktion ist wie folgt:

var timeoutID = window.setTimeout(func, [delay, param1, param2, ...]); 
var timeoutID = window.setTimeout(code, [delay]);

timeoutID: Timer ID-Nummer, die zum Löschen des Timers in der Funktion „clearTimeout()“ verwendet werden kann.

func: Die auszuführende Funktion.

Code: (alternative Syntax) eine auszuführende Codezeichenfolge.

Verzögerung: Verzögerungszeit in Millisekunden. Wenn nicht angegeben, ist der Standardwert 0.

Wir können window.setTimeout oder setTimeout verwenden. Die beiden Schreibmethoden sind grundsätzlich gleich, außer dass window.setTimeout auf die Funktion setTimeout als Eigenschaft des globalen Fensterobjekts verweist.

Anwendungsbeispiel:

function timeout(){ 
 document.getElementById('res').innerHTML=Math.floor(Math.random()*100 + 1); 
} 

setTimeout("timeout()",5000);

Bei der Ausführung des Codes wird nach 5 Sekunden die Funktion timeout() aufgerufen.

setInterval-Verwendung

Die Parameter und die Verwendung der setInterval-Funktion sind die gleichen wie bei der setTimeout-Funktion. Bitte beachten Sie die Verwendungseinführung der setTimeout-Funktion oben. Der Unterschied besteht darin, dass setInterval den Funktions- oder Codecode in regelmäßigen Abständen ausführt.

Anwendungsbeispiel:

var tt = 10; 
function timego(){ 
 tt--; 
 document.getElementById("tt").innerHTML = tt; 
 if(tt==0){ 
  window.location.href='/'; 
  return false; 
 } 
} 

var timer = window.setInterval("timego()",1000);

Die Funktion timego() definiert den vom Seitenelement #tt angezeigten Inhalt 0, Die Seite wird zur Startseite weitergeleitet. Dann definieren wir einen Timer-Timer und rufen mit setInterval() jede Sekunde timego() auf. Auf diese Weise wird timego zehnmal ausgeführt und jedes Mal wird die Zahl tt um 1 reduziert, bis sie 0 ist. Wenn Sie dann den Timer stoppen möchten, können Sie den folgenden Code verwenden:

window.clearInterval(timer);

Wenn der Code ausgeführt wird, springt die Seite nach 10 Sekunden zur Startseite.

Tatsächlich kann setTimeout() eine Funktion auch wiederholt in regelmäßigen Abständen ausführen, aber wir verwenden setTimeOut und setInterval einfach immer noch unterschiedlich. Darüber hinaus wird JavaScript in der JavaScript-Engine des Browsers in einer Single-Thread-Methode ausgeführt. In tatsächlichen Anwendungen müssen komplexe Aufgaben in die Warteschlange gestellt werden, was zu ungenauen Timern führen kann Der Artikel führt keine gründliche Recherche durch.

Beispiel 2:

Einstellen einer 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.

Verwenden eines Timers zum Implementieren einer verzögerten oder wiederholten Ausführung von JavaScript. Das Fensterobjekt bietet zwei Methoden, um den Effekt zu erzielen des Timers sind es window.setTimeout() bzw. 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); Zum angegebenen Zeitpunkt ruft das System die Funktion automatisch auf. 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 führt dazu, 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); Diese Eigenschaft ist auch in der Methode window.setInterval vorhanden. 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.

如果想要取消定时执行，和clearTimeout方法类似，可以调用window.clearInterval方法。clearInterval方法同样接收一个setInterval方法返回的值作为参数。例如： //定义一个反复执行的调用 var id=window.setInterval("somefunction",10000); //取消定时执行
window.clearInterval(id); 上面的代码仅用于说明怎样取消一个定时执行。实际上在很多场合都需要用到setInterval方法，下面将设计一个秒表，来介绍setInterval函数的用途：该秒表将包括两个按钮和一个用于显示时间的文本框。当单击开始按钮时开始计时，最小单位为0.01秒，此时再次单击按钮则停止计时，文本框显示经过的时间。另外一个按钮用于将当前时间清零。其实现

代码如下：

<!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>

给定时器调用传递参数 无论是window.setTimeout还是window.setInterval，在使用函数名作为调用句柄时都不能带参数，而在许多场合必须要带参数，这就需要想方法解决。例如对于函数hello(_name)，它用于针对用户名显示欢迎信息： var userName="jack";

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

这时，如果企图使用以下语句来使hello函数延迟3秒执行是不可行的：

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

这将使hello函数立即执行，并将返回值作为调用句柄传递给setTimeout函数，其结果并不是程序需要的。而使用字符串形式可以达到想要的结果：

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

这里的字符串是一段JavaScript代码，其中的userName表示的是变量。但这种写法不够直观，而且有些场合必须使用函数名，下面用一个小技巧来实现带参数函数的调用：

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

举一个例子：

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

虽然SetInterval与setTimeout都是用作定时器的，但它们的应用是有区别的。

更多javascript中SetInterval与setTimeout的定时器用法相关文章请关注PHP中文网！