자바스크립트에서 SetInterval 및 setTimeout의 타이머 사용
- 高洛峰원래의
- 2017-02-08 15:48:541251검색
setTimeout() 메서드는 지정된 밀리초 후에 함수나 계산된 표현식을 호출하는 데 사용되는 반면, setInterval()은 ClearInterval이 지울 때까지 지정된 밀리초마다 함수나 표현식을 호출하기 위해 루프를 반복합니다. 즉, setTimeout()은 한 번만 실행되고, setInterval()은 여러 번 실행될 수 있습니다. 두 함수의 매개변수도 동일합니다. 첫 번째 매개변수는 실행될 코드 또는 핸들이고, 두 번째 매개변수는 지연할 시간(밀리초)입니다.
setTimeOut 사용법
setTimeout 함수의 사용법은 다음과 같습니다.
var timeoutID = window.setTimeout(func, [delay, param1, param2, ...]); var timeoutID = window.setTimeout(code, [delay]);
timeoutID: 타이머 ID 번호 , 이는clearTimeout() 함수에서 타이머를 지우는 데 사용할 수 있습니다.
func: 실행할 함수입니다.
code: (대체 구문) 실행할 코드 문자열입니다.
지연: 지연 시간(밀리초)입니다. 지정하지 않으면 기본값은 0입니다.
window.setTimeout 또는 setTimeout을 사용할 수 있습니다. 두 가지 작성 방법은 window.setTimeout이 전역 창 개체의 속성으로 setTimeout 함수를 참조한다는 점을 제외하면 기본적으로 동일합니다.
적용예:
function timeout(){
document.getElementById('res').innerHTML=Math.floor(Math.random()*100 + 1);
}
setTimeout("timeout()",5000);
코드가 실행되면 5초 후에 timeout() 함수가 호출됩니다.
setInterval 사용법
setInterval 함수의 매개변수 및 사용법은 위의 setTimeout 함수 사용법 소개를 참조하세요. 차이점은 setInterval이 정기적으로 func 또는 코드 코드를 실행한다는 것입니다.
적용 예:
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);
timego() 함수는 페이지 요소 #tt가 표시하는 콘텐츠를 정의합니다. 지향합니다. 홈 페이지로 이동합니다. 그런 다음 타이머 타이머를 정의하고 setInterval()을 사용하여 1초마다 timego()를 호출합니다. 이런 식으로 timego는 10번 실행되며, 매번 tt는 0이 될 때까지 1씩 감소합니다. 그런 다음 타이머를 중지하려면 다음 코드를 사용할 수 있습니다.
window.clearInterval(timer);
코드가 실행되면 페이지가 다음 페이지로 이동합니다. 10초 후 홈페이지.
실제로 setTimeout()도 일정한 간격으로 함수를 반복적으로 실행할 수 있지만 우리는 여전히 단순히 setTimeOut과 setInterval을 다르게 사용합니다. 또한 JavaScript는 단일 스레드 방식으로 브라우저의 JavaScript 엔진에서 실행됩니다. 실제 응용 프로그램에서는 실행을 위해 복잡한 작업을 대기열에 넣어야 하므로 대규모 응용 프로그램에서는 이 문제를 고려해야 합니다. 기사는 깊은 연구를 수행하지 않습니다.
예 2:
JS에서 지연 설정:
SetInterval을 사용하는 것은 지연 함수 setTimeout을 설정하는 것과 매우 유사합니다. setTimeout은 작업을 수행하기 전에 일정 시간 동안 지연하는 데 사용됩니다.
setTimeout("function",time) 시간 초과 개체 설정 setInterval("function",time) 시간 초과 개체 설정
SetInterval은 자동으로 반복되며 setTimeout은 반복되지 않습니다.
clearTimeout(object)는 setTimeout 객체를 지웁니다.clearInterval(object)은 setInterval 객체를 지웁니다.
타이머를 사용하여 JavaScript의 지연 실행 또는 반복 실행을 구현합니다. window 객체는 효과를 얻기 위해 두 가지 방법을 제공합니다. 타이머의 경우 각각 window.setTimeout() 및 window.setInterval입니다. 전자는 지정된 시간 후에 코드 조각을 실행할 수 있는 반면, 후자는 지정된 시간마다 한 번씩 코드 조각을 실행하도록 할 수 있습니다.
그들의 프로토타입은 다음과 같습니다: window.setTimeout(expression,milliseconds); window.setInterval(expression,milliseconds); 그 중 표현식은 따옴표로 묶인 코드 조각일 수 있습니다. 함수 이름 지정된 시간에 시스템은 자동으로 함수를 호출합니다. 함수 이름을 호출 핸들로 사용하는 경우 문자열을 사용할 때 매개 변수를 작성할 수 있습니다.
두 메소드의 두 번째 매개변수는 밀리초로, 지연 또는 반복 실행에 대한 밀리초 수를 나타냅니다.
아래 두 가지 방법을 소개합니다.
1． window.setTimeout 메소드 이 메소드는 함수 실행을 지연시킬 수 있습니다. 예:
<script language="JavaScript" type="text/javascript">
<!--
function hello(){ alert("hello"); } window.setTimeout(hello,5000);
//-->
</script>
이 코드는 "hello" 대화 상자를 표시합니다. 5 페이지가 열린 후 몇 초 후에 ". 마지막 문장은 다음과 같이 작성할 수도 있습니다. window.setTimeout("hello()",5000); 이 속성은 window.setInterval 메소드에도 있습니다. 지연 기간에 도달하기 전에 지연된 실행을 취소하는 경우 타이머를 나타내는 ID를 받는 window.clearTimeout(timeoutId) 메서드를 사용할 수 있습니다. 이 ID는 setTimeout 메소드에 의해 반환됩니다. 예:
<script language="JavaScript" type="text/javascript">
<!--
function hello(){
alert("hello");
}
var id=window.setTimeout(hello,5000);
document.onclick=function(){
window.clearTimeout(id);
}
//-->
</script>
이러한 방식으로 표시를 취소하려면 ClearTimeout 메소드를 사용하면 시간 초과 작업이 취소됩니다.
2． window.setInterval 메소드 이 메소드는 정해진 시간마다 함수가 호출되도록 하는 매우 일반적인 메소드입니다.
如果想要取消定时执行，和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='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>
或者：
<p id="liujincai">
</p>
<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>
虽然SetInterval与setTimeout都是用作定时器的，但它们的应用是有区别的。
更多javascript中SetInterval与setTimeout的定时器用法相关文章请关注PHP中文网！