JavaScript_javascript 기술에서 타이머 Item23의 합리적인 사용-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JavaScript_javascript 기술에서 타이머 Item23의 합리적인 사용

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:34 PM

자바스크립트에는 타이머 전용 함수가 두 개 있습니다.

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事伯处理的进程时间线请看下图：

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

브라우저 너머 : 실제 세계의 JavaScriptApr 12, 2025 am 12:06 AM

실제 세계에서 JavaScript의 응용 프로그램에는 서버 측 프로그래밍, 모바일 애플리케이션 개발 및 사물 인터넷 제어가 포함됩니다. 1. 서버 측 프로그래밍은 Node.js를 통해 실현되며 동시 요청 처리에 적합합니다. 2. 모바일 애플리케이션 개발은 재교육을 통해 수행되며 크로스 플랫폼 배포를 지원합니다. 3. Johnny-Five 라이브러리를 통한 IoT 장치 제어에 사용되며 하드웨어 상호 작용에 적합합니다.

Next.js (백엔드 통합)로 멀티 테넌트 SAAS 애플리케이션 구축Apr 11, 2025 am 08:23 AM

일상적인 기술 도구를 사용하여 기능적 다중 테넌트 SaaS 응용 프로그램 (Edtech 앱)을 구축했으며 동일한 작업을 수행 할 수 있습니다. 먼저, 다중 테넌트 SaaS 응용 프로그램은 무엇입니까? 멀티 테넌트 SAAS 응용 프로그램은 노래에서 여러 고객에게 서비스를 제공 할 수 있습니다.

Next.js (Frontend Integration)를 사용하여 멀티 테넌트 SaaS 응용 프로그램을 구축하는 방법Apr 11, 2025 am 08:22 AM

이 기사에서는 Contrim에 의해 확보 된 백엔드와의 프론트 엔드 통합을 보여 주며 Next.js를 사용하여 기능적인 Edtech SaaS 응용 프로그램을 구축합니다. Frontend는 UI 가시성을 제어하기 위해 사용자 권한을 가져오고 API가 역할 기반을 준수하도록합니다.

JavaScript : 웹 언어의 다양성 탐색Apr 11, 2025 am 12:01 AM

JavaScript는 현대 웹 개발의 핵심 언어이며 다양성과 유연성에 널리 사용됩니다. 1) 프론트 엔드 개발 : DOM 운영 및 최신 프레임 워크 (예 : React, Vue.js, Angular)를 통해 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축합니다. 2) 서버 측 개발 : Node.js는 비 차단 I/O 모델을 사용하여 높은 동시성 및 실시간 응용 프로그램을 처리합니다. 3) 모바일 및 데스크탑 애플리케이션 개발 : 크로스 플랫폼 개발은 개발 효율을 향상시키기 위해 반응 및 전자를 통해 실현됩니다.

JavaScript의 진화 : 현재 동향과 미래 전망Apr 10, 2025 am 09:33 AM

JavaScript의 최신 트렌드에는 Typescript의 Rise, 현대 프레임 워크 및 라이브러리의 인기 및 WebAssembly의 적용이 포함됩니다. 향후 전망은보다 강력한 유형 시스템, 서버 측 JavaScript 개발, 인공 지능 및 기계 학습의 확장, IoT 및 Edge 컴퓨팅의 잠재력을 포함합니다.

Demystifying JavaScript : 그것이하는 일과 중요한 이유Apr 09, 2025 am 12:07 AM

JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.

Python 또는 JavaScript가 더 좋습니까?Apr 06, 2025 am 12:14 AM

Python은 데이터 과학 및 기계 학습에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 간결한 구문 및 풍부한 라이브러리 생태계로 유명하며 데이터 분석 및 웹 개발에 적합합니다. 2. JavaScript는 프론트 엔드 개발의 핵심입니다. Node.js는 서버 측 프로그래밍을 지원하며 풀 스택 개발에 적합합니다.

JavaScript를 어떻게 설치합니까?Apr 05, 2025 am 12:16 AM

JavaScript는 이미 최신 브라우저에 내장되어 있기 때문에 설치가 필요하지 않습니다. 시작하려면 텍스트 편집기와 브라우저 만 있으면됩니다. 1) 브라우저 환경에서 태그를 통해 HTML 파일을 포함하여 실행하십시오. 2) Node.js 환경에서 Node.js를 다운로드하고 설치 한 후 명령 줄을 통해 JavaScript 파일을 실행하십시오.

See all articles