Detailed explanation of the usage of SetInterval and setTimeout in JavaScript_javascript skills

setTimeout

Description

setTimeout(code,millisec)

The setTimeout() method is used to call a function or calculated expression after a specified number of milliseconds.

Note: During the calling process, you can use clearTimeout(id_of_settimeout) to terminate

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

setTimeinterval

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

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

The setInterval() method can call a function or calculate an expression according to the specified period (in milliseconds).

Set delay in JS:

Using SetInterval is very similar to setting the delay function setTimeout. setTimeout is used to delay for a period of time before performing an operation.

setTimeout("function",time) sets a timeout object setInterval("function",time) sets a timeout object

SetInterval is automatically repeated, and setTimeout will not be repeated.

clearTimeout(object) clears the setTimeout object clearInterval(object) clears the setInterval object

The setInterval() method can call a function or calculate an expression according to the specified period (in milliseconds).

Use a timer to implement delayed or repeated execution of JavaScript. The window object provides two methods to achieve the effect of the timer, namely window.setTimeout() and window.setInterval. The former can make a piece of code run after a specified time; while the latter can make a piece of code run once every specified time. Their prototypes are as follows: window.setTimeout(expression,milliseconds); window.setInterval(expression,milliseconds); Among them, expression can be a piece of code enclosed in quotation marks, or it can be a function name. When the specified time is reached, the system will The function will be called automatically. When using the function name as the call handle, it cannot take any parameters; when using a string, you can write the parameters to be passed in it. The second parameter of the two methods is milliseconds, which represents the number of milliseconds for delay or repeated execution.

The two methods are introduced below.

1． window.setTimeout method This method can delay the execution of a function, for example:

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

This code will cause the dialog box "hello" to be displayed 5 seconds after the page is opened. The last sentence can also be written as: window.setTimeout("hello()",5000); Readers can appreciate their differences. This property also exists in the window.setInterval method. If you cancel the delayed execution before the delay period is reached, you can use the window.clearTimeout(timeoutId) method, which receives an id representing a timer. This id is returned by the setTimeout method, for example:

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

In this way, if you want to cancel the display, you only need to click on any part of the page, and the window.clearTimeout method will be executed, so that the timeout operation will be cancelled.

2． window.setInterval method This method causes a function to be called every fixed time and is a very common method. If you want to cancel scheduled execution, similar to the clearTimeout method, you can call the window.clearInterval method. The clearInterval method also receives a value returned by the setInterval method as a parameter. For example: //Define a call to be executed repeatedly var id=window.setInterval("somefunction",10000); //Cancel scheduled execution window.clearInterval(id); The above code is only used to illustrate how to cancel a scheduled execution. In fact, the setInterval method needs to be used on many occasions. Below we will design a stopwatch to introduce the use of the setInterval function: the stopwatch will include two buttons and a text box for displaying the time. When the start button is clicked, the timing starts. The minimum unit is 0.01 seconds. Clicking the button again will stop the timing, and the text box displays the elapsed time. Another button is used to reset the current time to zero. The implementation code is as follows:

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

Passing parameters to the timer call, whether it is window.setTimeout or window.setInterval, cannot take parameters when using the function name as the calling handle. In many cases, parameters must be taken, which requires a solution. For example, for the function hello(_name), it is used to display a welcome message for the username: var userName="jack";

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

At this time, it is not feasible to use the following statement to delay the execution of the hello function for 3 seconds:

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

This will cause the hello function to execute immediately and pass the return value as the call handle to the setTimeout function. The result is not what the program needs. You can achieve the desired result by using string form:

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

The string here is a piece of JavaScript code, in which userName represents a variable. However, this way of writing is not intuitive enough, and in some cases function names must be used. Here is a little trick to call a function with parameters:

<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的相关知识有所帮助。