JavaScript_javascript 기술에서 타이머 Item23의 합리적인 사용
자바스크립트에는 타이머 전용 함수가 두 개 있습니다.
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事伯处理的进程时间线请看下图：
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7621
15
1389
52
89
11
70
19
31
136
프론트 엔드 열 용지 영수증에 대한 차량 코드 인쇄를 만나면 어떻게해야합니까?
Apr 04, 2025 pm 02:42 PM
프론트 엔드 개발시 프론트 엔드 열지대 티켓 인쇄를위한 자주 묻는 질문과 솔루션, 티켓 인쇄는 일반적인 요구 사항입니다. 그러나 많은 개발자들이 구현하고 있습니다 ...
누가 더 많은 파이썬이나 자바 스크립트를 지불합니까?
Apr 04, 2025 am 12:09 AM
기술 및 산업 요구에 따라 Python 및 JavaScript 개발자에 대한 절대 급여는 없습니다. 1. 파이썬은 데이터 과학 및 기계 학습에서 더 많은 비용을 지불 할 수 있습니다. 2. JavaScript는 프론트 엔드 및 풀 스택 개발에 큰 수요가 있으며 급여도 상당합니다. 3. 영향 요인에는 경험, 지리적 위치, 회사 규모 및 특정 기술이 포함됩니다.
Demystifying JavaScript : 그것이하는 일과 중요한 이유
Apr 09, 2025 am 12:07 AM
JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.
JavaScript를 사용하여 동일한 ID와 동일한 ID로 배열 요소를 하나의 객체로 병합하는 방법은 무엇입니까?
Apr 04, 2025 pm 05:09 PM
동일한 ID로 배열 요소를 JavaScript의 하나의 객체로 병합하는 방법은 무엇입니까? 데이터를 처리 할 때 종종 동일한 ID를 가질 필요가 있습니다 ...
Shiseido의 공식 웹 사이트와 같은 시차 스크롤 및 요소 애니메이션 효과를 달성하는 방법은 무엇입니까?
또는:
Shiseido의 공식 웹 사이트와 같은 페이지 스크롤과 함께 애니메이션 효과를 어떻게 달성 할 수 있습니까?
Apr 04, 2025 pm 05:36 PM
이 기사에서 시차 스크롤 및 요소 애니메이션 효과 실현에 대한 토론은 Shiseido 공식 웹 사이트 (https://www.shiseido.co.jp/sb/wonderland/)와 유사하게 달성하는 방법을 살펴볼 것입니다.
Console.log 출력 결과의 차이 : 두 통화가 다른 이유는 무엇입니까?
Apr 04, 2025 pm 05:12 PM
Console.log 출력의 차이의 근본 원인에 대한 심층적 인 논의. 이 기사에서는 Console.log 함수의 출력 결과의 차이점을 코드에서 분석하고 그에 따른 이유를 설명합니다. � ...
JavaScript는 배우기가 어렵습니까?
Apr 03, 2025 am 12:20 AM
JavaScript를 배우는 것은 어렵지 않지만 어려운 일입니다. 1) 변수, 데이터 유형, 기능 등과 같은 기본 개념을 이해합니다. 2) 마스터 비동기 프로그래밍 및 이벤트 루프를 통해이를 구현하십시오. 3) DOM 운영을 사용하고 비동기 요청을 처리합니다. 4) 일반적인 실수를 피하고 디버깅 기술을 사용하십시오. 5) 성능을 최적화하고 모범 사례를 따르십시오.
PowerPoint가 JavaScript를 실행할 수 있습니까?
Apr 01, 2025 pm 05:17 PM
JavaScript는 PowerPoint에서 실행할 수 있으며 외부 JavaScript 파일을 호출하거나 VBA를 통해 HTML 파일을 포함시켜 구현할 수 있습니다. 1. VBA를 사용하여 JavaScript 파일을 호출하려면 매크로를 활성화하고 VBA 프로그래밍 지식이 있어야합니다. 2. JavaScript가 포함 된 HTML 파일을 포함시켜 간단하고 사용하기 쉽지만 보안 제한이 적용됩니다. 장점에는 확장 된 기능과 유연성이 포함되며, 단점에는 보안, 호환성 및 복잡성이 포함됩니다. 실제로 보안, 호환성, 성능 및 사용자 경험에주의를 기울여야합니다.
