理解javascript定時器中的setTimeout與setInterval
一、解釋說明
1、概述
setTimeout：在指定的延遲時間之后調(diào)用一個函數(shù)或者執(zhí)行一個代碼片段
setInterval：周期性地調(diào)用一個函數(shù)(function)或者執(zhí)行一段代碼。
2、語法
setTimeout：
var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]); var timeoutID = window.setTimeout(code, delay);
- timeoutID 是該延時操作的數(shù)字ID, 此ID隨后可以用來作為window.clearTimeout方法的參數(shù)
- func 是你想要在delay毫秒之后執(zhí)行的函數(shù)
- code 在第二種語法,是指你想要在delay毫秒之后執(zhí)行的代碼
- delay 是延遲的毫秒數(shù) (一秒等于1000毫秒),函數(shù)的調(diào)用會在該延遲之后發(fā)生.但是實(shí)際的延遲時間可能會稍長一點(diǎn)
- 標(biāo)準(zhǔn)瀏覽器與IE10支持第一種語法中向延遲函數(shù)傳遞額外參數(shù)的功能
setInterval
var intervalID = window.setInterval(func, delay[, param1, param2, ...]); var intervalID = window.setInterval(code, delay);
- intervalID 是此重復(fù)操作的唯一辨識符，可以作為參數(shù)傳給clearInterval()。
- func 是你想要重復(fù)調(diào)用的函數(shù)。
- code 是另一種語法的應(yīng)用，是指你想要重復(fù)執(zhí)行的一段字符串構(gòu)成的代碼
- delay 是每次延遲的毫秒數(shù) (一秒等于1000毫秒)，函數(shù)的每次調(diào)用會在該延遲之后發(fā)生。和setTimeout一樣，實(shí)際的延遲時間可能會稍長一點(diǎn)。
- 標(biāo)準(zhǔn)瀏覽器與IE10支持第一種語法中向延遲函數(shù)傳遞額外參數(shù)的功能
<script type="text/javascript">
setTimeout( function(param){ alert(param)} , 100, 'ok');
</script>
簡單測試了下第五條，在我的電腦上面分別使用firefox與IE9測試，前者可以順利彈出ok，后者彈出了undefined。
二、“this”問題
由setTimeout()調(diào)用的代碼運(yùn)行在與所在函數(shù)完全分離的執(zhí)行環(huán)境上. 這會導(dǎo)致,這些代碼中包含的 this 關(guān)鍵字會指向 window (全局對象)對象,這和所期望的this的值是不一樣的。setInterval的情況類似。
<script type="text/javascript">
//this指向window
function shape(name) {
this.name = name;
this.timer = function(){alert('my shape is '+this.name)};
setTimeout(this.timer, 50);
}
new shape('rectangle');
</script>
沒有被傳進(jìn)去，分別用chrome，firefox和IE9實(shí)驗(yàn)了下，都是這個結(jié)果。
解決方法一：
<script type="text/javascript">
function shape(name) {
this.name = name;
this.timer = function(){alert('my shape is '+this.name)};
var _this = this;
setTimeout(function() {_this.timer.call(_this)}, 50);
}
new shape('rectangle');
</script>
設(shè)置一個局部變量_this，然后放到setTimeout的函數(shù)變量中，timer執(zhí)行call或apply，設(shè)置this值。
function能夠調(diào)用局部變量_this，多虧了Javascript的閉包。里面涉及了作用域鏈等知識，有興趣的可以自己去了解下，這里不展開了。
解決方法二：
這個方法有點(diǎn)高大上。自定義了setTimeout與setInterval。而且還擴(kuò)展了低版本的IE瀏覽器，不支持向延遲函數(shù)傳遞額外參數(shù)的問題。
<script type="text/javascript">
//自定義setTimeout與setInterval
var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
return __nativeST__(vCallback instanceof Function ? function () {
vCallback.apply(oThis, aArgs);
} : vCallback, nDelay);
};
window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
return __nativeSI__(vCallback instanceof Function ? function () {
vCallback.apply(oThis, aArgs);
} : vCallback, nDelay);
};
function shape(name) {
this.name = name;
this.timer = function(other){
alert('my shape is '+this.name);
alert('extra param is '+ other);
};
}
var rectangle = new shape('rectangle');
setTimeout.call(rectangle, rectangle.timer, 50, 'other');
</script>
1、設(shè)置局部變量，賦值為原生的setTimeout與setInterval
2、擴(kuò)展setTimeout與setInterval，aArgs通過分割arguments這個變量，獲取到額外的參數(shù)數(shù)組
3、用vCallback instanceof Function判斷這是不是一個函數(shù)或代碼，如果是函數(shù)就用apply執(zhí)行
4、setTimeout用call執(zhí)行，設(shè)定this對象，以及其它的func、delay等參數(shù)
5、順便擴(kuò)展setTimeout，IE低版本的瀏覽器也能執(zhí)行額外參數(shù)
三、setTimeout與setInterval之間的一個區(qū)別
<script type="text/javascript">
setTimeout(function(){
/* Some long block of code... */
setTimeout(arguments.callee, 100);
}, 10);
setInterval(function(){
/* Some long block of code... */
}, 100);
</script>
看上去，兩個功能是差不多的，但是里面其實(shí)是不一樣的。
setTimeout回調(diào)函數(shù)的執(zhí)行和上一次執(zhí)行之間的間隔至少有100ms（可能會更多，但不會少于100ms）
setInterval的回調(diào)函數(shù)將嘗試每隔100ms執(zhí)行一次，不論上次是否執(zhí)行完畢，時間間隔理論上是會<=delay的。
setInterval：
<script type="text/javascript">
function sleep(ms) {
var start = new Date();
while (new Date() - start <= ms) {}
}
var endTime = null;
var i = 0;
setInterval(count, 100);
function count() {
var elapsedTime = endTime ? (new Date() - endTime) : 100;
i++;
console.log('current count: ' + i + '.' + 'elapsed time: ' + elapsedTime + 'ms');
sleep(200);
endTime = new Date();
}
</script>
從firefox的firebug可以查看到，時間間隔很不規(guī)則。
情況大致是這樣的：由于count函數(shù)的執(zhí)行時間遠(yuǎn)大于setInterval的定時間隔，那么定時觸發(fā)線程就會源源不斷的產(chǎn)生異步定時事件，并放到任務(wù)隊(duì)列尾而不管它們是否已被處理，但一旦一個定時事件任務(wù)處理完，這些排列中的剩余定時事件就依次不間斷的被執(zhí)行。
setTimeout：
<script type="text/javascript">
function sleep(ms) {
var start = new Date();
while (new Date() - start <= ms) {}
}
var endTime = null;
var i = 0;
setTimeout(count, 100);
function count() {
var elapsedTime = endTime ? (new Date() - endTime) : 100;
i++;
console.log('current count: ' + i + '.' + 'elapsed time: ' + elapsedTime + 'ms');
sleep(200);
endTime = new Date();
setTimeout(count, 100);
}
</script>
以上就是本文的全部內(nèi)容，希望對大家學(xué)習(xí)javascript定時器有所幫助。
相關(guān)文章
js下通過prototype擴(kuò)展實(shí)現(xiàn)indexOf的代碼
這里使用js prototype擴(kuò)展實(shí)現(xiàn)的indexOf的實(shí)現(xiàn)代碼，跟js自帶的方法，差不多。2010-12-12
快速實(shí)現(xiàn)JS圖片懶加載(可視區(qū)域加載)示例代碼
目前很多網(wǎng)站，在圖片加載時均采用了一種名為懶加載的方式，具體表現(xiàn)為，當(dāng)頁面被請求時，只加載可視區(qū)域的圖片，其它部分的圖片則不加載，只有這些圖片出現(xiàn)在可視區(qū)域時才會動態(tài)加載這些圖片，下面本文就介紹了JS圖片懶加載(可視區(qū)域加載)的實(shí)現(xiàn)方法，一起來看看吧。2017-01-01
本文通過實(shí)例代碼給大家介紹了js同時按下兩個方向鍵的實(shí)現(xiàn)方法，感興趣的朋友跟隨腳本之家小編一起看看吧2007-12-12
Express無法通過req.body獲取請求傳遞的數(shù)據(jù)解決方法
這篇文章主要為大家介紹了Express無法通過req.body獲取請求傳遞的數(shù)據(jù)解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
將秒換成時分秒的方法有很多，在本文將為大家介紹下，使用js的具體的實(shí)現(xiàn)思路，有需要的朋友可以參考下，希望對大家有所幫助2013-09-09
錄屏軟件對于我們來說都不陌生了,本文我們要做的事情是實(shí)現(xiàn)自己的錄屏軟件,載體使用Electron,因?yàn)樗m合錄制桌面的場景,下面我們就來看看具體實(shí)現(xiàn)方法吧2024-01-01
百葉窗下拉菜單效果非常棒，今天小編給大家分享一段js代碼實(shí)現(xiàn)類似百葉窗下拉菜單效果，需要的朋友參考下2016-12-12
最近公司項(xiàng)目用到了avtivex控件。以前從來沒有用過。我把最近到處找到的使用方法整理一下。2011-01-01
前一段時間在圖書館看了本關(guān)于JavaScript的書，上面講怎樣用js編推箱子小游戲。我想，那掃雷也當(dāng)然能編出來，然后就用DW試了試，結(jié)果如下。2009-11-11
本篇文章主要介紹了JavaScript數(shù)組和對象的復(fù)制的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03