me_javascript 기술을 통해 자바스크립트 타이머 배우기

1. 타이머 개요

window 개체는 타이머 효과를 구현하는 두 가지 메서드, 즉 window.setTimeout() 및 window.setInterval을 제공합니다. 전자는 지정된 시간 후에 코드 조각을 실행할 수 있는 반면, 후자는 지정된 시간마다 한 번씩 코드 조각을 실행하도록 할 수 있습니다. 프로토타입은 다음과 같습니다.

window.setTimeout(expression,milliseconds); 
window.setInterval(expression,milliseconds); 

그 중 표현식은 따옴표로 묶인 코드일 수도 있고, 지정된 시간에 함수 이름을 호출 핸들로 사용하면 시스템이 자동으로 함수를 호출할 수도 있습니다. 어떤 매개변수도 포함할 수 없습니다. 문자열을 사용할 때 문자열에 전달할 매개변수를 작성할 수 있습니다. 두 메서드의 두 번째 매개 변수는 밀리초이며, 이는 지연 또는 반복 실행에 대한 밀리초 수를 나타냅니다. 아래 두 가지 방법을 소개합니다.

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

• setTimeout("function",time)은 시간 초과 객체를 설정합니다
• setInterval("function",time)은 시간 초과 객체를 설정합니다

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

• clearTimeout(object)는 설정된 setTimeout 객체를 지웁니다
• clearInterval(object)은 setInterval 객체를 지웁니다

타이머를 사용하여 JavaScript의 지연 또는 반복 실행을 구현합니다.

2. 구체적인 용도

1． window.setTimeout 메소드

이 방법은 함수 실행을 지연시킬 수 있습니다. 예를 들면 다음과 같습니다.

function hello(){ 
 alert("hello"); 
} 
window.setTimeout(hello,5000); 

이 코드는 페이지가 열린 후 5초 후에 "hello" 대화 상자가 표시되도록 합니다. 마지막 문장은 다음과 같이 쓸 수도 있습니다:

window.setTimeout("hello()",5000); 

이 속성은 window.setInterval 메소드에도 존재합니다.

지연 기간에 도달하기 전에 지연된 실행을 취소하는 경우 타이머를 나타내는 ID를 받는 window.clearTimeout(timeoutId) 메서드를 사용할 수 있습니다. 이 ID는 setTimeout 메소드에 의해 반환됩니다. 예:

function hello(){ 
 alert("hello"); 
} 
var id=window.setTimeout(hello,5000); 
document.onclick=function(){ 
 window.clearTimeout(id); 
} 

이렇게 표시를 취소하려면 페이지의 아무 부분이나 클릭하기만 하면 window.clearTimeout 메소드가 실행되므로 타임아웃 작업이 취소됩니다.

2. window.setInterval 메소드

이 방법은 정해진 시간마다 함수가 호출되도록 하는 매우 일반적인 방법입니다. ClearTimeout 메서드와 유사하게 예약된 실행을 취소하려면 window.clearInterval 메서드를 호출하면 됩니다. ClearInterval 메소드는 setInterval 메소드에서 반환한 값도 매개변수로 받습니다. 예:

//定义一个反复执行的调用 
var id=window.setInterval("somefunction",10000); 
//取消定时执行 
window.clearInterval(id); 

3. 도전

위 코드는 예약된 실행을 취소하는 방법을 설명하기 위해서만 사용됩니다. 실제로 setInterval 메소드는 여러 경우에 사용되어야 합니다. 스톱워치 디자인 에서는 setInterval 함수의 목적을 소개합니다. : 이 스톱워치에는 두 개의 버튼과 시간을 표시하는 텍스트 상자가 포함됩니다. 시작 버튼을 클릭하면 시간 측정이 시작됩니다. 버튼을 다시 클릭하면 시간 측정이 중지됩니다. 시간 및 다른 버튼은 현재 시간을 0으로 지우는 데 사용됩니다. 먼저 연습해 보세요. 답변을 보려면 클릭하세요. 《자바스크립트로 간단한 스톱워치 타이머 디자인하기》

3. 타이머 호출에 매개변수 전달

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

여기서 문자열은 userName이 변수를 나타내는 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)를 사용하여 매개변수 없이 함수 핸들을 반환함으로써 매개변수 전달 함수를 구현합니다.

4. 타이머의 '타이밍' 기능을 올바르게 이해하세요

첫 번째 코드 살펴보기

function display(){
 alert(hello);
}
setTimeout("display()", 3000);
alert("你首先看到的是我！")

代码先输出哪个？答案在程序中很明显。为什么呢？

初学者可能对Javascript的定时器有误解，认为它们是线程，其实Javascript是运行于单线程中的，而定时器仅仅是计划在未来的某个时间执行，而具体的执行时间是不能保证的，因为在页面的生命周期中，不同的时间可能有其它代码在控制Javascript的里进程。浏览器只是负责进行排序，指派某个代码在某个时间点运行。

下面说下Javascript线程，下图表示javascript进程时间线。

除了javascript执行进程外，还有一个需要在进程下一次空闲时间执行的代码队列，随着页面在其生命周期内的推移，代码会按照执行顺序添加到对列中，例如：当一个按钮被按下时，它的事件处理就会添加到队列中，并在下一个可能的时间内执行。

定时器对队列的工作方式是，当特定的时间过去后，将代码插入，注意添加到队列并不意味着它会马上执行，而只能说它会尽快执行，设定一个250ms后执行的定时器，不代表250ms后它会马上执行，它只会表示在250ms后被加入到队列中，如果这个时间点队列是空闲的，那么这段代码就会被执行。

请看以下代码：

var btn = document.getElementById("mybtn");
 btn.onclick = function () {
 setTimeout(function () {
 document.getElementById("message").nodeName = "mymessage";
 //其它代码
 }, 250);
 }

对于定时器最要注意的是：指定的时间间隔表示何时将定时器的代码添加到队列中，而不是何时执行代码。关于这个onclick事伯处理的进程时间线请看下图：

以上就是本文的全部内容，希望通过这篇文章大家更加了解javascript的定时器，大家共同进步。