javascript定時器setInterval的基本用法

家啊可能經(jīng)常在各大網(wǎng)站上看到這樣一個功能就是跳動的時鐘,一秒一秒的不停

的變化。今天這個小分享呢就給大家分享一下怎么用javascript來實現(xiàn)這種隨處

可見的小功能

開發(fā)功能“軌跡播放”時，遇到了一個情況。
原先同事已經(jīng)開發(fā)了一版，這次有個新功能：點擊線上任意一點后可以從點擊處重新播放。
看了一下原來的版本，發(fā)現(xiàn)同時使用了setTimeout和setInterval，兩者配合實現(xiàn)點線播放。
簡單結(jié)構(gòu)如下

 function test() {
 setInterval(function () {
 console.log("interval");
 //省略插值方法得到arr
 （...）
 play(arr);
 }, 2000);
 }
 function play(arr) {
 setTimeout(function () {
 play(arr);
 console.log("setTimeout");
 }, 40);
 }

我覺得這個結(jié)構(gòu)欠妥，兩個定時器配合必定會出現(xiàn)失誤！因此重構(gòu)了一版，將兩個定時器改為一個，用setInterval解決。
但是此時我并不知道欠妥欠在什么地方，缺乏理論支持，現(xiàn)在閑下來仔細研究了一下

0|1找問題

在仔細研究了舊版本后，我先把舊版本結(jié)構(gòu)扒了出來，排除其他因素，自己模擬了一個簡單版（就是上面的代碼）
setTimeout：在執(zhí)行時,是在載入后延遲指定時間后,去執(zhí)行一次表達式,僅執(zhí)行一次
setInterval：在執(zhí)行時,它從載入后,每隔指定的時間就執(zhí)行一次表達式

實驗一：在使用setInterval和setTimeout方法上，并沒有什么問題，決定跑一下，結(jié)果如下

從結(jié)果得出兩點結(jié)論

setTimeout與setInterval并不是50倍速度配合運行著
兩次interval間，timeout運行的次數(shù)越來越多，表明setInterval運行間隔越來越長，延遲越來越大

實驗二：加一點人工干預(yù)再執(zhí)行

 function test() {
 setInterval(function () {
 console.log("interval");
 play();
 }, 2000);
 }
 function play() {
 //延遲執(zhí)行
 for (var i = 0; i < 100000000; i++) {
 
 }
 setTimeout(function () {
 play();
 console.log("setTimeout");
 }, 40);
 }

從結(jié)果得出兩點結(jié)論

setInterval可能會隨函數(shù)處理時間，減少間隔
推測，因為Javascript是單線程的，setInterval和setTimeout是放隊列里執(zhí)行的，很容易受到回調(diào)事件影響

實驗三：拖動縮放瀏覽器

從結(jié)果得出結(jié)論

當(dāng)瀏覽器標(biāo)簽切換到其他頁面，或者瀏覽器最小化，會影響計時器，兩者會出現(xiàn)間隔減小

0|1涉及知識點

綜上實驗結(jié)果，網(wǎng)上搜集了一些資料能說明問題：

JavaScript是單線程，但是瀏覽器是多線程，Javascript是瀏覽器多線程中的一個線程。（圖參考自：https://www.cnblogs.com/tesky0125/p/4619549.html）

Javascript會把執(zhí)行的回調(diào)函數(shù)、瀏覽器的觸發(fā)事件、UI渲染事件，先放到隊列中，隊列根據(jù)先進先出的規(guī)則，依次執(zhí)行他們，當(dāng)執(zhí)行到隊列中的setInterval時很難保證其與setTimeout同步關(guān)系還保持。
setInterval無視代碼錯誤：代碼報錯，但是setInterval依舊會按時執(zhí)行，不會中斷。
setInterval無視網(wǎng)絡(luò)延遲：如果調(diào)用ajax或其他服務(wù)，他不會管是否返回回調(diào)，會繼續(xù)按時執(zhí)行。
setInterval不保證執(zhí)行：因為setInterval會定時執(zhí)行，如果函數(shù)邏輯很長，間隔時間內(nèi)執(zhí)行不完，后續(xù)方法會被拋棄。
會受瀏覽器狀態(tài)影響，tab切換、最小化等

0|1解決方案

在做軌跡播放時，setInterval的延遲還在可接受范圍之內(nèi)，但是網(wǎng)上給出的最佳解決方案是用setTimeout做。
setTimeout只會執(zhí)行一次，在執(zhí)行完成后，重新啟動新的Timeout，時間runtime計算設(shè)置為差時，減少出現(xiàn)間隔越來越大的情況

近需要網(wǎng)頁添加多個倒計時. 查閱網(wǎng)絡(luò),基本上都是千遍一律的不好用. 自己按需寫了個.希望對大家有用. 有用請贊一個哦!

//js

//js2

var plugJs={

stamp:0,

tid:1,

stampnow:Date.parse(new Date())/1000,//統(tǒng)一開始時間戳

intervalTime:function(){

if(plugJs.stamp > 0){

var day = Math.floor(plugJs.stamp / (60 * 60 * 24));

var hour = Math.floor(plugJs.stamp / (60 * 60)) - (day * 24);

var minute = Math.floor(plugJs.stamp / 60) - (day * 24 * 60) - (hour * 60);

var second = Math.floor(plugJs.stamp) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);

if (day <= 9) day = '0' + day;

if (hour <= 9) hour = '0' + hour;

if (minute <= 9) minute = '0' + minute;

if (second <= 9) second = '0' + second;

jQuery('.t_h_'+plugJs.tid).html(hour);

jQuery('.t_m_'+plugJs.tid).html(minute);

jQuery('.t_s_'+plugJs.tid).html(second);

plugJs.stamp--;

setTimeout('if(typeof(plugJs.intervalTime) == "function"){plugJs.intervalTime();}',1000);

}

timer:function (stampend,tid){

plugJs.stamp = parseInt(stampend)-parseInt(plugJs.stampnow);//剩余時間戳

setTimeout('if(typeof(plugJs.intervalTime) == "function"){plugJs.intervalTime();}',1000);

}

};

jQuery(document).ready(function(){

var stampend = parseInt(jQuery('.countdown_1').attr('data-time'));//靈活讀取表里的結(jié)束時間戳

plugJs.timer(stampend,'1');

});

//html 原文http://blog.csdn.net/websites/article/details/50037611

00

:

00

:

00

</div>

00

:

00

:

00

</div>

注釋:setTimeout() 只執(zhí)行 code 一次。如果要多次調(diào)用，請使用 setInterval() 或者讓 code 自身再次調(diào)用 setTimeout()。

在線咨詢

上一篇：放棄JSP吧-否則你無路可走
下一篇：為什么HTML5如此受青睞？

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

javascript定時器setInterval的基本用法

家啊可能經(jīng)常在各大網(wǎng)站上看到這樣一個功能就是跳動的時鐘,一秒一秒的不停

的變化。今天這個小分享呢就給大家分享一下怎么用javascript來實現(xiàn)這種隨處

可見的小功能

您的項目需求