Javascript定時器實例程式碼

一、什麼是定時器

JS提供了一些原生方法來實現延時去執行某一段程式碼，下面來簡單介紹一下

##setTimeout:設定一個定時器，在定時器到期後執行一次函數或程式碼段

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

• #timeoutId: 定時器ID

• func: 延遲後執行的函數

• code: 延遲後執行的程式碼字串，不建議使用原則類似

  eval()

• delay: 延遲的時間（單位：毫秒），預設值為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: 在瀏覽器完全結束目前運行的操作之後立即執行指定的函數(僅IE10和Node 0.10+中有實作)，類似setTimeout(func, 0)

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

• immediateId: 定時器ID

• func: 回呼

requestAnimationFrame: 專門為實現高效能的幀動畫而設計的API，但是不能指定延遲時間，而是根據瀏覽器的刷新頻率而定（幀）

var requestId = window.requestAnimationFrame(func);

• func: 回呼

上面簡單的介紹了四種JS的定時器，而本文將會主要介紹較常用的兩種：

setTimeout和setInterval。

二、舉栗子

• #基本用法

#

// 下面代码执行之后会输出什么？
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>setTimeout<code>和</code>setInterval<code>的話，它兩個只是在執行次數上有區別，</code>setTimeout<code>#一次、</code>setInterval<code>n次。 </code></p>而透過<p>setTimeout<code>模擬的</code>setInterval<code>與</code>setInterval<code>的區別則在於：</code>setTimeout<code>只有在</code>回調完成之後才會去呼叫下一次計時器<strong>，而</strong>setInterval<code>則不管回呼函數的執行情況，當</code>到達規定時間就會在事件佇列中插入一個執行回呼的事件<strong>，所以在選擇計時器的方式時需要考慮</strong>setInterval<code>的這種特性是否會對你的業務程式碼有什麼影響？ </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>#三、JS計時器的工作原理<h2></h2>在解釋上面問題的答案之前我們先來了解定時器的工作原理，這裡將用引用How JavaScript Timers Work中的例子來解釋定時器的工作原理，該圖為一個簡單版的原理圖。 <p></p><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/013/14c7285aa427c9064d4fe8d1ea51338d-0.png?x-oss-process=image/resize,p_40" class="lazy"    style="max-width:90%"  style="max-width:90%" title="Javascript定時器實例程式碼" alt="Javascript定時器實例程式碼"></p>上圖中，左側數字代表時間，單位毫秒；左側文字代表某一個操作完成後，瀏覽器去詢問目前佇列中存在哪些正在等待執行的操作；藍色方塊表示正在執行的程式碼區塊；右側文字代表在程式碼運行過程中，出現哪些非同步事件。此圖大致流程如下：<p></p>

• 程式開始時，有一個JS程式碼區塊開始執行，執行時長約為18ms，在執行過程中有3個非同步事件觸發，其中包含一個

  setTimeout、滑鼠點選事件、setInterval

• #第一個

  setTimeout先運行，延遲時間為10ms，稍後滑鼠事件出現，瀏覽器在事件佇列中插入點擊的回呼函數，稍後setInterval執行，10ms到達之後，setTimeout向事件佇列中插入setTimeout的回呼

• 當第一個程式碼區塊執行完成後，瀏覽器會查看佇列中有哪些事件在等待，他取出排在佇列最前面的程式碼來執行

• 在瀏覽器處理滑鼠點選回呼時，

  setInterval再次檢查到到達延遲時間，他將再次向事件佇列中插入interval的回調，以後每隔指定的延遲時間之後都會在佇列中插入一個回呼

• 后面浏览器将在执行完当前队头的代码之后，将再次取出目前队头的事件来执行

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

四、题目答案

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

第一题

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();

五、需要注意的点

• setTimeout有最小时间间隔限制，HTML5标准为4ms，小于4ms按照4ms处理，但是每个浏览器实现的最小间隔都不同

• 因为JS引擎只有一个线程，所以它将会强制异步事件排队执行

• 如果setInterval的回调执行时间长于指定的延迟，setInterval将无间隔的一个接一个执行

• this的指向问题可以通过bind函数、定义变量、箭头函数的方式来解决

以上是Javascript定時器實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！