JavaScript의 SetInterval 및 setTimeout 사용법에 대한 자세한 설명-JS 튜토리얼-php.cn

setTimeout

설명

setTimeout(code, millisec)

setTimeout() 메서드는 다음을 지정하는 데 사용됩니다. 함수나 계산된 표현식을 호출하기까지의 시간(밀리초)입니다.

참고: 호출 프로세스 중에clearTimeout(id_of_settimeout)을 사용하여 종료할 수 있습니다.

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

setTimeinterval

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

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

setInterval() 메서드는 지정된 기간(밀리초 단위)에 따라 함수를 호출하거나 표현식을 계산할 수 있습니다.

JS에서 지연 설정:

SetInterval을 사용하는 것은 지연 함수 setTimeout을 설정하는 것과 매우 유사합니다. setTimeout은 작업을 수행하기 전에 일정 시간 동안 지연하는 데 사용됩니다.

setTimeout("function",time) 시간 초과 개체 설정 setInterval("function",time) 시간 초과 개체 설정

SetInterval은 자동으로 반복되며 setTimeout은 반복되지 않습니다.

clearTimeout(object)는 setTimeout 객체를 지웁니다.clearInterval(object)은 setInterval 객체를 지웁니다.

setInterval() 메소드는 지정된 기간(밀리초 단위) 또는 Evaluate 표현식에 따라 함수를 호출할 수 있습니다.

타이머를 사용하여 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초입니다. 버튼을 다시 클릭하면 타이밍이 중지되고 텍스트 상자에 경과 시간이 표시됩니다. 또 다른 버튼은 현재 시간을 0으로 재설정하는 데 사용됩니다. 구현 코드는 다음과 같습니다.

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

로그인 후 복사

여기에 정의되어 있습니다. 매개변수를 받고 매개변수 없이 함수를 반환하는 함수는 이 함수 내부에서 외부 함수의 매개변수를 사용하므로 매개변수를 사용하지 않고 호출됩니다. 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(&#39;northsnow()&#39;,1000);
clearTimeout(tttt);

로그인 후 복사

或者：

tttt=setInterval(&#39;northsnow()&#39;,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>

로그인 후 복사

以上内容是小编给大家介绍的关于JavaScript中SetInterval与setTimeout的用法详解，希望对大家学习SetInterval与setTimeout的相关知识有所帮助。

更多JavaScript中SetInterval与setTimeout的用法详解相关文章请关注PHP中文网！