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

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

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

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

var requestId = window.requestAnimationFrame(func);

// 下面代码执行之后会输出什么？
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

// 执行在面的代码块会输出什么？
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>

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

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

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

// 题目一
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>

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