W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
JavaScript提供定時(shí)執(zhí)行代碼的功能,叫做定時(shí)器(timer),主要由setTimeout()
和setInterval()
這兩個(gè)函數(shù)來(lái)完成。它們向任務(wù)隊(duì)列添加定時(shí)任務(wù)。
setTimeout
函數(shù)用來(lái)指定某個(gè)函數(shù)或某段代碼,在多少毫秒之后執(zhí)行。它返回一個(gè)整數(shù),表示定時(shí)器的編號(hào),以后可以用來(lái)取消這個(gè)定時(shí)器。
var timerId = setTimeout(func|code, delay)
上面代碼中,setTimeout
函數(shù)接受兩個(gè)參數(shù),第一個(gè)參數(shù)func|code
是將要推遲執(zhí)行的函數(shù)名或者一段代碼,第二個(gè)參數(shù)delay
是推遲執(zhí)行的毫秒數(shù)。
console.log(1);
setTimeout('console.log(2)',1000);
console.log(3);
上面代碼的輸出結(jié)果就是1,3,2,因?yàn)?code class="highlighter-rouge">setTimeout指定第二行語(yǔ)句推遲1000毫秒再執(zhí)行。
需要注意的是,推遲執(zhí)行的代碼必須以字符串的形式,放入setTimeout
,因?yàn)橐鎯?nèi)部使用eval
函數(shù),將字符串轉(zhuǎn)為代碼。如果推遲執(zhí)行的是函數(shù),則可以直接將函數(shù)名,放入setTimeout
。一方面eval
函數(shù)有安全顧慮,另一方面為了便于JavaScript引擎優(yōu)化代碼,setTimeout
方法一般總是采用函數(shù)名的形式,就像下面這樣。
function f(){
console.log(2);
}
setTimeout(f,1000);
// 或者
setTimeout(function (){console.log(2)},1000);
如果省略setTimeout
的第二個(gè)參數(shù),則該參數(shù)默認(rèn)為0。
除了前兩個(gè)參數(shù),setTimeout
還允許添加更多的參數(shù)。它們將被傳入推遲執(zhí)行的函數(shù)(回調(diào)函數(shù))。
setTimeout(function(a,b){
console.log(a+b);
},1000,1,1);
上面代碼中,setTimeout
共有4個(gè)參數(shù)。最后那兩個(gè)參數(shù),將在1000毫秒之后回調(diào)函數(shù)執(zhí)行時(shí),作為回調(diào)函數(shù)的參數(shù)。
IE 9.0及以下版本,只允許setTimeout
有兩個(gè)參數(shù),不支持更多的參數(shù)。這時(shí)有三種解決方法。第一種是在一個(gè)匿名函數(shù)里面,讓回調(diào)函數(shù)帶參數(shù)運(yùn)行,再把匿名函數(shù)輸入setTimeout
。
setTimeout(function() {
myFunc("one", "two", "three");
}, 1000);
上面代碼中,myFunc是真正要推遲執(zhí)行的函數(shù),有三個(gè)參數(shù)。如果直接放入setTimeout
,低版本的IE不能帶參數(shù),所以可以放在一個(gè)匿名函數(shù)。
第二種解決方法是使用bind
方法,把多余的參數(shù)綁定在回調(diào)函數(shù)上面,生成一個(gè)新的函數(shù)輸入setTimeout
。
setTimeout(function(arg1){}.bind(undefined, 10), 1000);
上面代碼中,bind
方法第一個(gè)參數(shù)是undefined
,表示將原函數(shù)的this
綁定全局作用域,第二個(gè)參數(shù)是要傳入原函數(shù)的參數(shù)。它運(yùn)行后會(huì)返回一個(gè)新函數(shù),該函數(shù)不帶參數(shù)。
第三種解決方法是自定義setTimeout
,使用apply
方法將參數(shù)輸入回調(diào)函數(shù)。
<!--[if lte IE 9]><script>
(function(f){
window.setTimeout =f(window.setTimeout);
window.setInterval =f(window.setInterval);
})(function(f){return function(c,t){
var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)}
});
</script><![endif]-->
除了參數(shù)問(wèn)題,setTimeout
還有一個(gè)需要注意的地方:如果被setTimeout
推遲執(zhí)行的回調(diào)函數(shù)是某個(gè)對(duì)象的方法,那么該方法中的this
關(guān)鍵字將指向全局環(huán)境,而不是定義時(shí)所在的那個(gè)對(duì)象。
var x = 1;
var o = {
x: 2,
y: function(){
console.log(this.x);
}
};
setTimeout(o.y,1000);
// 1
上面代碼輸出的是1,而不是2,這表示o.y
的this所指向的已經(jīng)不是o,而是全局環(huán)境了。
再看一個(gè)不容易發(fā)現(xiàn)錯(cuò)誤的例子。
function User(login) {
this.login = login;
this.sayHi = function() {
console.log(this.login);
}
}
var user = new User('John');
setTimeout(user.sayHi, 1000);
上面代碼只會(huì)顯示undefined
,因?yàn)榈鹊絬ser.sayHi執(zhí)行時(shí),它是在全局對(duì)象中執(zhí)行,所以this.login取不到值。
為了防止出現(xiàn)這個(gè)問(wèn)題,一種解決方法是將user.sayHi放在函數(shù)中執(zhí)行。
setTimeout(function() {
user.sayHi();
}, 1000);
上面代碼中,sayHi是在user作用域內(nèi)執(zhí)行,而不是在全局作用域內(nèi)執(zhí)行,所以能夠顯示正確的值。
另一種解決方法是,使用bind
方法,將綁定sayHi綁定在user上面。
setTimeout(user.sayHi.bind(user), 1000);
HTML 5標(biāo)準(zhǔn)規(guī)定,setTimeout
的最短時(shí)間間隔是4毫秒。為了節(jié)電,對(duì)于那些不處于當(dāng)前窗口的頁(yè)面,瀏覽器會(huì)將時(shí)間間隔擴(kuò)大到1000毫秒。另外,如果筆記本電腦處于電池供電狀態(tài),Chrome和IE 9以上的版本,會(huì)將時(shí)間間隔切換到系統(tǒng)定時(shí)器,大約是15.6毫秒。
setInterval
函數(shù)的用法與setTimeout
完全一致,區(qū)別僅僅在于setInterval
指定某個(gè)任務(wù)每隔一段時(shí)間就執(zhí)行一次,也就是無(wú)限次的定時(shí)執(zhí)行。
<input type="button" onclick="clearInterval(timer)" value="stop">
<script>
var i = 1
var timer = setInterval(function() {
console.log(2);
}, 1000);
</script>
上面代碼表示每隔1000毫秒就輸出一個(gè)2,直到用戶點(diǎn)擊了停止按鈕。
與setTimeout
一樣,除了前兩個(gè)參數(shù),setInterval
方法還可以接受更多的參數(shù),它們會(huì)傳入回調(diào)函數(shù),下面是一個(gè)例子。
function f(){
for (var i=0;i<arguments.length;i++){
console.log(arguments[i]);
}
}
setInterval(f, 1000, "Hello World");
// Hello World
// Hello World
// Hello World
// ...
如果網(wǎng)頁(yè)不在瀏覽器的當(dāng)前窗口(或tab),許多瀏覽器限制setInteral指定的反復(fù)運(yùn)行的任務(wù)最多每秒執(zhí)行一次。
下面是一個(gè)通過(guò)setInterval
方法實(shí)現(xiàn)網(wǎng)頁(yè)動(dòng)畫(huà)的例子。
var div = document.getElementById('someDiv');
var opacity = 1;
var fader = setInterval(function() {
opacity -= 0.1;
if (opacity >= 0) {
div.style.opacity = opacity;
} else {
clearInterval(fader);
}
}, 100);
上面代碼每隔100毫秒,設(shè)置一次div
元素的透明度,直至其完全透明為止。
setInterval
的一個(gè)常見(jiàn)用途是實(shí)現(xiàn)輪詢。下面是一個(gè)輪詢URL的Hash值是否發(fā)生變化的例子。
var hash = window.location.hash;
var hashWatcher = setInterval(function() {
if (window.location.hash != hash) {
updatePage();
}
}, 1000);
setInterval指定的是“開(kāi)始執(zhí)行”之間的間隔,并不考慮每次任務(wù)執(zhí)行本身所消耗的時(shí)間。因此實(shí)際上,兩次執(zhí)行之間的間隔會(huì)小于指定的時(shí)間。比如,setInterval指定每100ms執(zhí)行一次,每次執(zhí)行需要5ms,那么第一次執(zhí)行結(jié)束后95毫秒,第二次執(zhí)行就會(huì)開(kāi)始。如果某次執(zhí)行耗時(shí)特別長(zhǎng),比如需要105毫秒,那么它結(jié)束后,下一次執(zhí)行就會(huì)立即開(kāi)始。
為了確保兩次執(zhí)行之間有固定的間隔,可以不用setInterval
,而是每次執(zhí)行結(jié)束后,使用setTimeout
指定下一次執(zhí)行的具體時(shí)間。
var i = 1;
var timer = setTimeout(function () {
alert(i++);
timer = setTimeout(arguments.callee, 2000);
}, 2000);
上面代碼可以確保,下一個(gè)對(duì)話框總是在關(guān)閉上一個(gè)對(duì)話框之后2000毫秒彈出。
根據(jù)這種思路,可以自己部署一個(gè)函數(shù),實(shí)現(xiàn)間隔時(shí)間確定的setInterval
的效果。
function interval(func, wait){
var interv = function(){
func.call(null);
setTimeout(interv, wait);
};
setTimeout(interv, wait);
}
interval(function(){
console.log(2);
},1000);
上面代碼部署了一個(gè)interval
函數(shù),用循環(huán)調(diào)用setTimeout
模擬了setInterval
。
HTML 5標(biāo)準(zhǔn)規(guī)定,setInterval
的最短間隔時(shí)間是10毫秒,也就是說(shuō),小于10毫秒的時(shí)間間隔會(huì)被調(diào)整到10毫秒。
setTimeout和setInterval函數(shù),都返回一個(gè)表示計(jì)數(shù)器編號(hào)的整數(shù)值,將該整數(shù)傳入clearTimeout和clearInterval函數(shù),就可以取消對(duì)應(yīng)的定時(shí)器。
var id1 = setTimeout(f,1000);
var id2 = setInterval(f,1000);
clearTimeout(id1);
clearInterval(id2);
setTimeout
和setInterval
返回的整數(shù)值是連續(xù)的,也就是說(shuō),第二個(gè)setTimeout
方法返回的整數(shù)值,將比第一個(gè)的整數(shù)值大1。利用這一點(diǎn),可以寫(xiě)一個(gè)函數(shù),取消當(dāng)前所有的setTimeout
。
(function() {
var gid = setInterval(clearAllTimeouts, 0);
function clearAllTimeouts() {
var id = setTimeout(function() {}, 0);
while (id > 0) {
if (id !== gid) {
clearTimeout(id);
}
id--;
}
}
})();
運(yùn)行上面代碼后,實(shí)際上再設(shè)置任何setTimeout都無(wú)效了。
下面是一個(gè)clearTimeout實(shí)際應(yīng)用的例子。有些網(wǎng)站會(huì)實(shí)時(shí)將用戶在文本框的輸入,通過(guò)Ajax方法傳回服務(wù)器,jQuery的寫(xiě)法如下。
$('textarea').on('keydown', ajaxAction);
這樣寫(xiě)有一個(gè)很大的缺點(diǎn),就是如果用戶連續(xù)擊鍵,就會(huì)連續(xù)觸發(fā)keydown事件,造成大量的Ajax通信。這是不必要的,而且很可能會(huì)發(fā)生性能問(wèn)題。正確的做法應(yīng)該是,設(shè)置一個(gè)門(mén)檻值,表示兩次Ajax通信的最小間隔時(shí)間。如果在設(shè)定的時(shí)間內(nèi),發(fā)生新的keydown事件,則不觸發(fā)Ajax通信,并且重新開(kāi)始計(jì)時(shí)。如果過(guò)了指定時(shí)間,沒(méi)有發(fā)生新的keydown事件,將進(jìn)行Ajax通信將數(shù)據(jù)發(fā)送出去。
這種做法叫做debounce(防抖動(dòng))方法,用來(lái)返回一個(gè)新函數(shù)。只有當(dāng)兩次觸發(fā)之間的時(shí)間間隔大于事先設(shè)定的值,這個(gè)新函數(shù)才會(huì)運(yùn)行實(shí)際的任務(wù)。假定兩次Ajax通信的間隔不小于2500毫秒,上面的代碼可以改寫(xiě)成下面這樣。
$('textarea').on('keydown', debounce(ajaxAction, 2500))
利用setTimeout和clearTimeout,可以實(shí)現(xiàn)debounce方法,該方法用于防止某個(gè)函數(shù)在短時(shí)間內(nèi)被密集調(diào)用。具體來(lái)說(shuō),debounce方法返回一個(gè)新版的該函數(shù),這個(gè)新版函數(shù)調(diào)用后,只有在指定時(shí)間內(nèi)沒(méi)有新的調(diào)用,才會(huì)執(zhí)行,否則就重新計(jì)時(shí)。
function debounce(fn, delay){
var timer = null; // 聲明計(jì)時(shí)器
return function(){
var context = this;
var args = arguments;
clearTimeout(timer);
timer = setTimeout(function(){
fn.apply(context, args);
}, delay);
};
}
// 用法示例
var todoChanges = _.debounce(batchLog, 1000);
Object.observe(models.todo, todoChanges);
現(xiàn)實(shí)中,最好不要設(shè)置太多個(gè)setTimeout和setInterval,它們耗費(fèi)CPU。比較理想的做法是,將要推遲執(zhí)行的代碼都放在一個(gè)函數(shù)里,然后只對(duì)這個(gè)函數(shù)使用setTimeout或setInterval。
setTimeout
和setInterval
的運(yùn)行機(jī)制是,將指定的代碼移出本次執(zhí)行,等到下一輪 Event Loop 時(shí),再檢查是否到了指定時(shí)間。如果到了,就執(zhí)行對(duì)應(yīng)的代碼;如果不到,就等到再下一輪 Event Loop 時(shí)重新判斷。
這意味著,setTimeout
和setInterval
指定的代碼,必須等到本輪 Event Loop 的所有任務(wù)都執(zhí)行完,才會(huì)開(kāi)始執(zhí)行。由于前面的任務(wù)到底需要多少時(shí)間執(zhí)行完,是不確定的,所以沒(méi)有辦法保證,setTimeout
和setInterval
指定的任務(wù),一定會(huì)按照預(yù)定時(shí)間執(zhí)行。
setTimeout(someTask, 100);
veryLongTask();
上面代碼的setTimeout
,指定100毫秒以后運(yùn)行一個(gè)任務(wù)。但是,如果后面的veryLongTask
函數(shù)(同步任務(wù))運(yùn)行時(shí)間非常長(zhǎng),過(guò)了100毫秒還無(wú)法結(jié)束,那么被推遲運(yùn)行的someTask
就只有等著,等到veryLongTask
運(yùn)行結(jié)束,才輪到它執(zhí)行。
下面是setInterval
的例子。
setInterval(function () {
console.log(2);
}, 1000);
sleep(3000);
上面的第一行語(yǔ)句要求每隔1000毫秒,就輸出一個(gè)2。但是,緊接著的語(yǔ)句需要3000毫秒才能完成,那么setInterval
就必須推遲到3000毫秒之后才開(kāi)始生效。這3000毫秒之內(nèi),setInterval
不會(huì)產(chǎn)生累積效應(yīng)。
setTimeout
的作用是將代碼推遲到指定時(shí)間執(zhí)行,如果指定時(shí)間為0
,即setTimeout(f, 0)
,那么會(huì)立刻執(zhí)行嗎?
答案是不會(huì)。因?yàn)樯弦欢握f(shuō)過(guò),必須要等到當(dāng)前腳本的同步任務(wù)和“任務(wù)隊(duì)列”中已有的事件,全部處理完以后,才會(huì)執(zhí)行setTimeout
指定的任務(wù)。也就是說(shuō),setTimeout
的真正作用是,在“消息隊(duì)列”的現(xiàn)有消息的后面再添加一個(gè)消息,規(guī)定在指定時(shí)間執(zhí)行某段代碼。setTimeout
添加的事件,會(huì)在下一次Event Loop
執(zhí)行。
setTimeout(f, 0)
將第二個(gè)參數(shù)設(shè)為0
,作用是讓f
在現(xiàn)有的任務(wù)(腳本的同步任務(wù)和“消息隊(duì)列”指定的任務(wù))一結(jié)束就立刻執(zhí)行。也就是說(shuō),setTimeout(f, 0)
的作用是,盡可能早地執(zhí)行指定的任務(wù)。而并不是會(huì)立刻就執(zhí)行這個(gè)任務(wù)。
setTimeout(function () {
console.log('你好!');
}, 0);
上面代碼的含義是,盡可能早地顯示“你好!”。
setTimeout(f, 0)
指定的任務(wù),最早也要到下一次Event Loop才會(huì)執(zhí)行。請(qǐng)看下面的例子。
setTimeout(function() {
console.log("Timeout");
}, 0);
function a(x) {
console.log("a() 開(kāi)始運(yùn)行");
b(x);
console.log("a() 結(jié)束運(yùn)行");
}
function b(y) {
console.log("b() 開(kāi)始運(yùn)行");
console.log("傳入的值為" + y);
console.log("b() 結(jié)束運(yùn)行");
}
console.log("當(dāng)前任務(wù)開(kāi)始");
a(42);
console.log("當(dāng)前任務(wù)結(jié)束");
// 當(dāng)前任務(wù)開(kāi)始
// a() 開(kāi)始運(yùn)行
// b() 開(kāi)始運(yùn)行
// 傳入的值為42
// b() 結(jié)束運(yùn)行
// a() 結(jié)束運(yùn)行
// 當(dāng)前任務(wù)結(jié)束
// Timeout
上面代碼說(shuō)明,setTimeout(f, 0)
必須要等到當(dāng)前腳本的所有同步任務(wù)結(jié)束后才會(huì)執(zhí)行。
即使消息隊(duì)列是空的,0毫秒實(shí)際上也是達(dá)不到的。根據(jù)HTML 5標(biāo)準(zhǔn),setTimeout
推遲執(zhí)行的時(shí)間,最少是4毫秒。如果小于這個(gè)值,會(huì)被自動(dòng)增加到4。這是為了防止多個(gè)setTimeout(f, 0)
語(yǔ)句連續(xù)執(zhí)行,造成性能問(wèn)題。
另一方面,瀏覽器內(nèi)部使用32位帶符號(hào)的整數(shù),來(lái)儲(chǔ)存推遲執(zhí)行的時(shí)間。這意味著setTimeout
最多只能推遲執(zhí)行2147483647毫秒(24.8天),超過(guò)這個(gè)時(shí)間會(huì)發(fā)生溢出,導(dǎo)致回調(diào)函數(shù)將在當(dāng)前任務(wù)隊(duì)列結(jié)束后立即執(zhí)行,即等同于setTimeout(f, 0)
的效果。
setTimeout(f, 0)
有幾個(gè)非常重要的用途。它的一大應(yīng)用是,可以調(diào)整事件的發(fā)生順序。比如,網(wǎng)頁(yè)開(kāi)發(fā)中,某個(gè)事件先發(fā)生在子元素,然后冒泡到父元素,即子元素的事件回調(diào)函數(shù),會(huì)早于父元素的事件回調(diào)函數(shù)觸發(fā)。如果,我們先讓父元素的事件回調(diào)函數(shù)先發(fā)生,就要用到setTimeout(f, 0)。
var input = document.getElementsByTagName('input[type=button]')[0];
input.onclick = function A() {
setTimeout(function B() {
input.value +=' input';
}, 0)
};
document.body.onclick = function C() {
input.value += ' body'
};
上面代碼在點(diǎn)擊按鈕后,先觸發(fā)回調(diào)函數(shù)A,然后觸發(fā)函數(shù)C。在函數(shù)A中,setTimeout將函數(shù)B推遲到下一輪Loop執(zhí)行,這樣就起到了,先觸發(fā)父元素的回調(diào)函數(shù)C的目的了。
用戶自定義的回調(diào)函數(shù),通常在瀏覽器的默認(rèn)動(dòng)作之前觸發(fā)。比如,用戶在輸入框輸入文本,keypress事件會(huì)在瀏覽器接收文本之前觸發(fā)。因此,下面的回調(diào)函數(shù)是達(dá)不到目的的。
document.getElementById('input-box').onkeypress = function(event) {
this.value = this.value.toUpperCase();
}
上面代碼想在用戶輸入文本后,立即將字符轉(zhuǎn)為大寫(xiě)。但是實(shí)際上,它只能將上一個(gè)字符轉(zhuǎn)為大寫(xiě),因?yàn)闉g覽器此時(shí)還沒(méi)接收到文本,所以this.value
取不到最新輸入的那個(gè)字符。只有用setTimeout改寫(xiě),上面的代碼才能發(fā)揮作用。
document.getElementById('my-ok').onkeypress = function() {
var self = this;
setTimeout(function() {
self.value = self.value.toUpperCase();
}, 0);
}
上面代碼將代碼放入setTimeout之中,就能使得它在瀏覽器接收到文本之后觸發(fā)。
由于setTimeout(f,0)實(shí)際上意味著,將任務(wù)放到瀏覽器最早可得的空閑時(shí)段執(zhí)行,所以那些計(jì)算量大、耗時(shí)長(zhǎng)的任務(wù),常常會(huì)被放到幾個(gè)小部分,分別放到setTimeout(f,0)里面執(zhí)行。
var div = document.getElementsByTagName('div')[0];
// 寫(xiě)法一
for (var i = 0xA00000; i < 0xFFFFFF; i++) {
div.style.backgroundColor = '#' + i.toString(16);
}
// 寫(xiě)法二
var timer;
var i=0x100000;
function func() {
timer = setTimeout(func, 0);
div.style.backgroundColor = '#' + i.toString(16);
if (i++ == 0xFFFFFF) clearTimeout(timer);
}
timer = setTimeout(func, 0);
上面代碼有兩種寫(xiě)法,都是改變一個(gè)網(wǎng)頁(yè)元素的背景色。寫(xiě)法一會(huì)造成瀏覽器“堵塞”,因?yàn)镴avaScript執(zhí)行速度遠(yuǎn)高于DOM,會(huì)造成大量DOM操作“堆積”,而寫(xiě)法二就不會(huì),這就是setTimeout(f, 0)
的好處。
另一個(gè)使用這種技巧的例子是代碼高亮的處理。如果代碼塊很大,一次性處理,可能會(huì)對(duì)性能造成很大的壓力,那么將其分成一個(gè)個(gè)小塊,一次處理一塊,比如寫(xiě)成setTimeout(highlightNext, 50)
的樣子,性能壓力就會(huì)減輕。
正常情況下,JavaScript的任務(wù)是同步執(zhí)行的,即執(zhí)行完前一個(gè)任務(wù),然后執(zhí)行后一個(gè)任務(wù)。只有遇到異步任務(wù)的情況下,執(zhí)行順序才會(huì)改變。
這時(shí),需要區(qū)分兩種任務(wù):正常任務(wù)(task)與微任務(wù)(microtask)。它們的區(qū)別在于,“正常任務(wù)”在下一輪Event Loop執(zhí)行,“微任務(wù)”在本輪Event Loop的所有任務(wù)結(jié)束后執(zhí)行。
console.log(1);
setTimeout(function() {
console.log(2);
}, 0);
Promise.resolve().then(function() {
console.log(3);
}).then(function() {
console.log(4);
});
console.log(5);
// 1
// 5
// 3
// 4
// 2
上面代碼的執(zhí)行結(jié)果說(shuō)明,setTimeout(fn, 0)
在Promise.resolve
之后執(zhí)行。
這是因?yàn)?code class="highlighter-rouge">setTimeout語(yǔ)句指定的是“正常任務(wù)”,即不會(huì)在當(dāng)前的Event Loop執(zhí)行。而Promise會(huì)將它的回調(diào)函數(shù),在狀態(tài)改變后的那一輪Event Loop指定為微任務(wù)。所以,3和4輸出在5之后、2之前。
正常任務(wù)包括以下情況。
微任務(wù)目前主要是process.nextTick
和 Promise 這兩種情況。
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: