자바스크립트 타이머 예제 코드-JS 튜토리얼-php.cn

자바스크립트 타이머 예제 코드

高洛峰

풀어 주다： 2017-03-19 17:14:00

원래의

1557명이 탐색했습니다.

1. 타이머란 무엇입니까

JS는 특정 코드의 실행을 지연시키는 몇 가지 기본 방법을 제공합니다.

setTimeout: 타이머 설정 타이머가 만료된 후 함수 또는 코드 세그먼트를 한 번 실행

var timeoutId = window.setTimeout(func[, delay, param1, param2, ...]);
var timeoutId = window.setTimeout(code[, delay]);

로그인 후 복사

timeoutId: 타이머 ID

func: 지연 후 실행된 함수

코드: 지연 후 실행되는 코드 문자열은 사용하지 않는 것이 좋습니다. eval()

지연 시간과 유사합니다. (단위: 밀리초), 기본값은 0

param1, param2: 지연 함수에 전달되는 매개변수, IE9 이상 지원

setInterval: 정해진 시간 간격으로 함수 또는 코드 세그먼트를 반복 호출

var intervalId = window.setInterval(func, delay[, param1, param2, ...]);
var intervalId = window.setInterval(code, delay);

로그인 후 복사

intervalId: 반복 작업의 ID

func: 지연된 함수 호출

code: 코드 세그먼트

delay: 지연 시간, 기본값 없음

setImmediate: setTimeout(func, 0)

var immediateId = setImmediate(func[, param1, param2, ...]);
var immediateId = setImmediate(func);

로그인 후 복사

와 유사하게 브라우저가 현재 실행 중인 작업을 완전히 종료한 후 즉시 지정된 기능을 실행합니다(IE10 및 Node 0.10+에서만 구현됨).

immediateId: 타이머 ID

func: 콜백

requestAnimationFrame: 특수 API 고성능 프레임 애니메이션을 구현하기 위해 설계되었으나 지연 시간을 지정할 수 없으며 브라우저의 새로 고침 빈도(프레임)에 따라 결정됩니다.

var requestId = window.requestAnimationFrame(func);

로그인 후 복사

func: Callback

위에서는 JS 타이머 4가지에 대해 간략하게 소개하고 있으며, 이번 글에서는 주로 많이 사용되는 두 가지 타이머인 setTimeout과 setInterval에 대해 소개하겠습니다.

2. 예를 들어

기본 사용법

// 下面代码执行之后会输出什么？
var intervalId, timeoutId;

timeoutId = setTimeout(function () {
    console.log(1);
}, 300);

setTimeout(function () {
    clearTimeout(timeoutId);
    console.log(2);
}, 100);

setTimeout('console.log("5")', 400);

intervalId = setInterval(function () {
    console.log(4);
    clearInterval(intervalId);
}, 200);

// 分别输出: 2、4、5

로그인 후 복사

setInterval 차이점은 무엇입니까? setTimeout

// 执行在面的代码块会输出什么？
setTimeout(function () {
    console.log('timeout');
}, 1000);

setInterval(function () {
    console.log('interval')
}, 1000);

// 输出一次 timeout，每隔1S输出一次 interval

/*--------------------------------*/

// 通过setTimeout模拟setInterval 和 setInterval有啥区别么？
var callback = function () {
    if (times++ > max) {
        clearTimeout(timeoutId);
        clearInterval(intervalId);
    }

    console.log('start', Date.now() - start);
    for (var i = 0; i <p>과 <code>setTimeout</code>인 경우 실행 횟수만 다릅니다. <code>setInterval</code>번과 <code>setTimeout</code>n번입니다. <code>setInterval</code></p><p>에 의해 시뮬레이션된 <code>setTimeout</code>과 <code>setInterval</code>의 차이점은 다음과 같습니다. <code>setInterval</code>은 <code>setTimeout</code> 콜백이 완료된 후에만 다음 타이머 <strong>를 호출하지만 </strong>는 관계없이 콜백 함수 실행 상태 중 <code>setInterval</code>이 지정된 시간에 도달하면 콜백을 실행하는 이벤트 <strong>가 이벤트 큐에 삽입되므로 타이머 선택 시 </strong>의 이 기능을 고려해야 합니다. 귀하의 비즈니스 코드에 어떤 영향을 미치나요? <code>setInterval</code></p>

로그인 후 복사

과 setTimeout(func, 0) 중 누가 더 빠릅니까? (이 테스트는 그냥 호기심에 작성했습니다.) setImmediate(func)

console.time('immediate');
console.time('timeout');

setImmediate(() => {
    console.timeEnd('immediate');
});

setTimeout(() => {
    console.timeEnd('timeout');
}, 0);

로그인 후 복사

에서 테스트해보니 Node.JS v6.7.0이 더 일찍 실행된 걸 발견했습니다setTimeout

면접 질문

다음 코드를 실행한 결과는 무엇인가요?

// 题目一
var t = true;
 
setTimeout(function(){
    t = false;
}, 1000);
 
while(t){}
 
alert('end');

/*--------------------------------*/

// 题目二
for (var i = 0; i <p><strong>질문에 대한 답변은 추후에 안내드리겠습니다<em></em></strong></p>3. JS 타이머의 작동 원리<h2></h2>설명에서 위의 질문에 대답하기 전에 먼저 타이머 작동 방식을 이해해 보겠습니다. 여기서는 타이머의 작동 원리를 설명하기 위해 JavaScript 타이머 작동 방법의 예를 사용합니다. 이 그림은 회로도의 간단한 버전입니다. <p></p><p><img src="https://img.php.cn/upload/article/000/000/013/14c7285aa427c9064d4fe8d1ea51338d-0.png"    style="max-width:90%"  style="max-width:90%" title="자바스크립트 타이머 예제 코드" alt="자바스크립트 타이머 예제 코드"></p>위 그림에서 왼쪽 숫자는 밀리초 단위의 시간을 나타냅니다. 왼쪽 텍스트는 작업이 완료된 후 브라우저가 시간을 묻는 메시지를 나타냅니다. 실행을 기다리는 현재 큐입니다. 파란색 사각형은 실행 중인 코드 블록을 나타냅니다. 오른쪽의 텍스트는 코드가 실행되는 동안 발생하는 비동기 이벤트를 나타냅니다. 그림의 일반적인 흐름은 다음과 같습니다. <p></p>

로그인 후 복사

프로그램이 시작되면 JS 코드 블록이 실행되기 시작하며 실행 시간은 약 18ms입니다. 실행 중에 3개의 비동기 이벤트가 발생합니다. 하나의
, 마우스 클릭 이벤트, setTimeoutsetInterval
첫 번째
가 먼저 실행되고 10ms 후에 마우스 이벤트가 나타납니다. 브라우저는 이를 이벤트 큐에 삽입합니다. 클릭 콜백 기능은 setTimeout 10ms가 지나면 setInterval이 처음 실행될 때 이벤트 큐 setTimeoutsetTimeout
콜백을 삽입합니다. 코드 블록이 실행되면 브라우저는 대기열에 어떤 이벤트가 기다리고 있는지 확인하고 대기열 맨 위에 있는 코드를 꺼내어
브라우저가 마우스 클릭 콜백을 처리할 때 실행합니다. ,
다시 확인합니다. 지연 시간에 도달하면 간격 콜백을 다시 이벤트 대기열에 삽입합니다. 앞으로는 지정된 지연 시간마다 콜백이 대기열에 삽입됩니다. setInterval
后面浏览器将在执行完当前队头的代码之后，将再次取出目前队头的事件来执行

这里只是对定时器的原理做一个简单版的描述，实际的处理过程比这个复杂。

四、题目答案

好啦，我们现在再来看看上面的面试题的答案。

第一题

alert永远都不会执行，因为JS是单线程的，且定时器的回调将在等待当前正在执行的任务完成后才执行，而while(t) {}直接就进入了死循环一直占用线程，不给回调函数执行机会

第二题

代码会输出 5 5 5 5 5，理由同上，当i = 0时，生成一个定时器，将回调插入到事件队列中，等待当前队列中无任务执行时立即执行，而此时for循环正在执行，所以回调被搁置。当for循环执行完成后，队列中存在着5个回调函数，他们的都将执行console.log(i)的操作，因为当前js代码上中并没有使用块级作用域，所以i的值在for循环结束后一直为5，所以代码将输出5个5

第三题

这个问题涉及到this的指向问题，由setTimeout()调用的代码运行在与所在函数完全分离的执行环境上. 这会导致这些代码中包含的this关键字会指向window (或全局)对象，window对象中并不存在shout方法，所以就会报错，修改方案如下:

var obj = {
    msg: 'obj',
    shout: function () {
        alert(this.msg);
    },
    waitAndShout: function() {
        var self = this; // 这里将this赋给一个变量
        setTimeout(function () {
            self.shout();
        }, 0);    
    }
};
obj.waitAndShout();

로그인 후 복사