집 >웹 프론트엔드 >JS 튜토리얼 >javascript_javascript 기술에서 SetInterval 및 setTimeout의 타이머 사용

javascript_javascript 기술에서 SetInterval 및 setTimeout의 타이머 사용

WBOY원래의: 2016-05-16 15:43:071598검색

예 1:

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가 표시하는 콘텐츠를 정의합니다. tt가 0이면 페이지가 홈 페이지로 이동합니다. 그런 다음 타이머 타이머를 정의하고 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>

이 코드는 페이지가 열린 후 5초 후에 "hello" 대화 상자가 표시되도록 합니다. 마지막 문장은 다음과 같이 작성할 수도 있습니다. 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>

这样，如果要取消显示，只需单击页面任何一部分，就执行了window.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);

举一个例子：

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

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

성명：

이전 기사：드롭다운 메뉴와 포커스 맵 코드가 있는 jquery다음 기사：드롭다운 메뉴와 포커스 맵 코드가 있는 jquery

javascript_javascript 기술에서 SetInterval 및 setTimeout의 타이머 사용

관련 기사