JavaScript_javascript 기술에서 타이머 Item23의 합리적인 사용
- WBOY원래의
- 2016-05-16 15:34:151089검색
자바스크립트에는 타이머 전용 함수가 두 개 있습니다.
1. 카운트다운 타이머: timename=setTimeout("function();",delaytime)
2. 루프 타이머: timename=setInterval("function();",delaytime)
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.01초입니다. 버튼을 다시 클릭하면 타이밍이 중지되고 텍스트 상자에 경과 시간이 표시됩니다. 또 다른 버튼은 현재 시간을 0으로 재설정하는 데 사용됩니다. 구현 코드는 다음과 같습니다.
<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>
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事伯处理的进程时间线请看下图：
