摘要:提供定時執行代碼的功能,叫做定時器,主要由和這兩個函數來完成。它返回一個整數,表示定時器的編號,以后可以用來取消這個定時器。上面代碼中,回調函數不會再執行了,因為兩個定時器都被取消了。
JavaScript 提供定時執行代碼的功能,叫做定時器(timer),主要由setTimeout()和setInterval()這兩個函數來完成。它們向任務隊列添加定時任務。
setTimeout()setTimeout函數用來指定某個函數或某段代碼,在多少毫秒之后執行。它返回一個整數,表示定時器的編號,以后可以用來取消這個定時器。
var timerId = setTimeout(func|code, delay);
上面代碼中,setTimeout函數接受兩個參數,第一個參數func|code是將要推遲執行的函數名或者一段代碼,第二個參數delay是推遲執行的毫秒數。
console.log(1); setTimeout("console.log(2)",1000); console.log(3); // 1 // 3 // 2
上面代碼會先輸出1和3,然后等待1000毫秒再輸出2。注意,console.log(2)必須以字符串的形式,作為setTimeout的參數。
如果推遲執行的是函數,就直接將函數名,作為setTimeout的參數。
function f() { console.log(2); } setTimeout(f, 1000);
setTimeout的第二個參數如果省略,則默認為0。
setTimeout(f) // 等同于 setTimeout(f, 0)
除了前兩個參數,setTimeout還允許更多的參數。它們將依次傳入推遲執行的函數(回調函數)。
setTimeout(function (a,b) { console.log(a + b); }, 1000, 1, 1);
上面代碼中,setTimeout共有4個參數。最后那兩個參數,將在1000毫秒之后回調函數執行時,作為回調函數的參數。
還有一個需要注意的地方,如果回調函數是對象的方法,那么setTimeout使得方法內部的this關鍵字指向全局環境,而不是定義時所在的那個對象。
var x = 1; var obj = { x: 2, y: function () { console.log(this.x); } }; setTimeout(obj.y, 1000) // 1
上面代碼輸出的是1,而不是2。因為當obj.y在1000毫秒后運行時,this所指向的已經不是obj了,而是全局環境。
為了防止出現這個問題,一種解決方法是將obj.y放入一個函數。
var x = 1; var obj = { x: 2, y: function () { console.log(this.x); } }; setTimeout(function () { obj.y(); }, 1000); // 2
上面代碼中,obj.y放在一個匿名函數之中,這使得obj.y在obj的作用域執行,而不是在全局作用域內執行,所以能夠顯示正確的值。
另一種解決方法是,使用bind方法,將obj.y這個方法綁定在obj上面。
var x = 1; var obj = { x: 2, y: function () { console.log(this.x); } }; setTimeout(obj.y.bind(obj), 1000) // 2setInterval()
setInterval函數的用法與setTimeout完全一致,區別僅僅在于setInterval指定某個任務每隔一段時間就執行一次,也就是無限次的定時執行。
var i = 1 var timer = setInterval(function() { console.log(2); }, 1000)
上面代碼中,每隔1000毫秒就輸出一個2,會無限運行下去,直到關閉當前窗口。
與setTimeout一樣,除了前兩個參數,setInterval方法還可以接受更多的參數,它們會傳入回調函數。
下面是一個通過setInterval方法實現網頁動畫的例子。
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毫秒,設置一次div元素的透明度,直至其完全透明為止。
setInterval的一個常見用途是實現輪詢。下面是一個輪詢 URL 的 Hash 值是否發生變化的例子。
var hash = window.location.hash; var hashWatcher = setInterval(function() { ??if (window.location.hash != hash) { ????updatePage(); ??} }, 1000);
setInterval指定的是“開始執行”之間的間隔,并不考慮每次任務執行本身所消耗的時間。因此實際上,兩次執行之間的間隔會小于指定的時間。比如,setInterval指定每 100ms 執行一次,每次執行需要 5ms,那么第一次執行結束后95毫秒,第二次執行就會開始。如果某次執行耗時特別長,比如需要105毫秒,那么它結束后,下一次執行就會立即開始。
為了確保兩次執行之間有固定的間隔,可以不用setInterval,而是每次執行結束后,使用setTimeout指定下一次執行的具體時間。
var i = 1; var timer = setTimeout(function f() { // ... timer = setTimeout(f, 2000); }, 2000);
上面代碼可以確保,下一次執行總是在本次執行結束之后的2000毫秒開始。
clearTimeout(),clearInterval()setTimeout和setInterval函數,都返回一個整數值,表示計數器編號。將該整數傳入clearTimeout和clearInterval函數,就可以取消對應的定時器。
var id1 = setTimeout(f, 1000); var id2 = setInterval(f, 1000); clearTimeout(id1); clearInterval(id2);
上面代碼中,回調函數f不會再執行了,因為兩個定時器都被取消了。
setTimeout和setInterval返回的整數值是連續的,也就是說,第二個setTimeout方法返回的整數值,將比第一個的整數值大1。
function f() {} setTimeout(f, 1000) // 10 setTimeout(f, 1000) // 11 setTimeout(f, 1000) // 12
上面代碼中,連續調用三次setTimeout,返回值都比上一次大了1。
利用這一點,可以寫一個函數,取消當前所有的setTimeout定時器。
(function() { // 每輪事件循環檢查一次 var gid = setInterval(clearAllTimeouts, 0); function clearAllTimeouts() { var id = setTimeout(function() {}, 0); while (id > 0) { if (id !== gid) { clearTimeout(id); } id--; } } })();
上面代碼中,先調用setTimeout,得到一個計算器編號,然后把編號比它小的計數器全部取消。
實例:debounce 函數有時,我們不希望回調函數被頻繁調用。比如,用戶填入網頁輸入框的內容,希望通過 Ajax 方法傳回服務器,jQuery 的寫法如下。
$("textarea").on("keydown", ajaxAction);
這樣寫有一個很大的缺點,就是如果用戶連續擊鍵,就會連續觸發keydown事件,造成大量的 Ajax 通信。這是不必要的,而且很可能產生性能問題。正確的做法應該是,設置一個門檻值,表示兩次 Ajax 通信的最小間隔時間。如果在間隔時間內,發生新的keydown事件,則不觸發 Ajax 通信,并且重新開始計時。如果過了指定時間,沒有發生新的keydown事件,再將數據發送出去。
這種做法叫做 debounce(防抖動)。假定兩次 Ajax 通信的間隔不得小于2500毫秒,上面的代碼可以改寫成下面這樣。
$("textarea").on("keydown", debounce(ajaxAction, 2500)); function debounce(fn, delay){ var timer = null; // 聲明計時器 return function() { var context = this; var args = arguments; clearTimeout(timer); timer = setTimeout(function () { fn.apply(context, args); }, delay); }; }
上面代碼中,只要在2500毫秒之內,用戶再次擊鍵,就會取消上一次的定時器,然后再新建一個定時器。這樣就保證了回調函數之間的調用間隔,至少是2500毫秒。
運行機制setTimeout和setInterval的運行機制,是將指定的代碼移出本輪事件循環,等到下一輪事件循環,再檢查是否到了指定時間。如果到了,就執行對應的代碼;如果不到,就繼續等待。
這意味著,setTimeout和setInterval指定的回調函數,必須等到本輪事件循環的所有同步任務都執行完,才會開始執行。由于前面的任務到底需要多少時間執行完,是不確定的,所以沒有辦法保證,setTimeout和setInterval指定的任務,一定會按照預定時間執行。
setTimeout(someTask, 100); veryLongTask();
上面代碼的setTimeout,指定100毫秒以后運行一個任務。但是,如果后面的veryLongTask函數(同步任務)運行時間非常長,過了100毫秒還無法結束,那么被推遲運行的someTask就只有等著,等到veryLongTask運行結束,才輪到它執行。
再看一個setInterval的例子。
setInterval(function () { console.log(2); }, 1000); sleep(3000); function sleep(ms) { var start = Date.now(); while ((Date.now() - start) < ms) { } }
上面代碼中,setInterval要求每隔1000毫秒,就輸出一個2。但是,緊接著的sleep語句需要3000毫秒才能完成,那么setInterval就必須推遲到3000毫秒之后才開始生效。注意,生效后setInterval不會產生累積效應,即不會一下子輸出三個2,而是只會輸出一個2。
setTimeout(f, 0) 含義setTimeout的作用是將代碼推遲到指定時間執行,如果指定時間為0,即setTimeout(f, 0),那么會立刻執行嗎?
答案是不會。因為上一節說過,必須要等到當前腳本的同步任務,全部處理完以后,才會執行setTimeout指定的回調函數f。也就是說,setTimeout(f, 0)會在下一輪事件循環一開始就執行。
setTimeout(function () { console.log(1); }, 0); console.log(2); // 2 // 1
上面代碼先輸出2,再輸出1。因為2是同步任務,在本輪事件循環執行,而1是下一輪事件循環執行。
總之,setTimeout(f, 0)這種寫法的目的是,盡可能早地執行f,但是并不能保證立刻就執行f。
實際上,setTimeout(f, 0)不會真的在0毫秒之后運行,不同的瀏覽器有不同的實現。以 Edge 瀏覽器為例,會等到4毫秒之后運行。如果電腦正在使用電池供電,會等到16毫秒之后運行;如果網頁不在當前 Tab 頁,會推遲到1000毫秒(1秒)之后運行。這樣是為了節省系統資源。
應用setTimeout(f, 0)有幾個非常重要的用途。它的一大應用是,可以調整事件的發生順序。比如,網頁開發中,某個事件先發生在子元素,然后冒泡到父元素,即子元素的事件回調函數,會早于父元素的事件回調函數觸發。如果,想讓父元素的事件回調函數先發生,就要用到setTimeout(f, 0)。
// HTML 代碼如下 // var input = document.getElementById("myButton"); input.onclick = function A() { setTimeout(function B() { input.value +=" input"; }, 0) }; document.body.onclick = function C() { input.value += " body" };
上面代碼在點擊按鈕后,先觸發回調函數A,然后觸發函數C。函數A中,setTimeout將函數B推遲到下一輪事件循環執行,這樣就起到了,先觸發父元素的回調函數C的目的了。
另一個應用是,用戶自定義的回調函數,通常在瀏覽器的默認動作之前觸發。比如,用戶在輸入框輸入文本,keypress事件會在瀏覽器接收文本之前觸發。因此,下面的回調函數是達不到目的的。
// HTML 代碼如下 // document.getElementById("input-box").onkeypress = function (event) { this.value = this.value.toUpperCase(); }
上面代碼想在用戶每次輸入文本后,立即將字符轉為大寫。但是實際上,它只能將本次輸入前的字符轉為大寫,因為瀏覽器此時還沒接收到新的文本,所以this.value取不到最新輸入的那個字符。只有用setTimeout改寫,上面的代碼才能發揮作用。
document.getElementById("input-box").onkeypress = function() { var self = this; setTimeout(function() { self.value = self.value.toUpperCase(); }, 0); }
上面代碼將代碼放入setTimeout之中,就能使得它在瀏覽器接收到文本之后觸發。
由于setTimeout(f, 0)實際上意味著,將任務放到瀏覽器最早可得的空閑時段執行,所以那些計算量大、耗時長的任務,常常會被放到幾個小部分,分別放到setTimeout(f, 0)里面執行。
var div = document.getElementsByTagName("div")[0]; // 寫法一 for (var i = 0xA00000; i < 0xFFFFFF; i++) { div.style.backgroundColor = "#" + i.toString(16); } // 寫法二 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);
上面代碼有兩種寫法,都是改變一個網頁元素的背景色。寫法一會造成瀏覽器“堵塞”,因為 JavaScript 執行速度遠高于 DOM,會造成大量 DOM 操作“堆積”,而寫法二就不會,這就是setTimeout(f, 0)的好處。
另一個使用這種技巧的例子是代碼高亮的處理。如果代碼塊很大,一次性處理,可能會對性能造成很大的壓力,那么將其分成一個個小塊,一次處理一塊,比如寫成setTimeout(highlightNext, 50)的樣子,性能壓力就會減輕。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/102625.html
摘要:但是定時器沒關。通過變量來控制定時器內函數的執行停止播放默認為。方式三通過關閉定時器來停止輪播圖的運動。,通過傳入定時器的編號來。清除定時器,再開啟定時器。所以,每次打開定時器,先清除前一個。點擊頁面任何一個位置關閉定時器。 1.定時器 定義:當我們需要隔一段時間,再執行一段代碼?;蛘呙扛粢欢螘r間,執行一段代碼。我們可以使用定時器。使用場景:例如網站輪播圖的自動滾動。廣告延遲彈出的某些...
摘要:但是定時器沒關。通過變量來控制定時器內函數的執行停止播放默認為。方式三通過關閉定時器來停止輪播圖的運動。,通過傳入定時器的編號來。清除定時器,再開啟定時器。所以,每次打開定時器,先清除前一個。點擊頁面任何一個位置關閉定時器。 1.定時器 定義:當我們需要隔一段時間,再執行一段代碼?;蛘呙扛粢欢螘r間,執行一段代碼。我們可以使用定時器。使用場景:例如網站輪播圖的自動滾動。廣告延遲彈出的某些...
摘要:但是定時器沒關。通過變量來控制定時器內函數的執行停止播放默認為。方式三通過關閉定時器來停止輪播圖的運動。,通過傳入定時器的編號來。清除定時器,再開啟定時器。所以,每次打開定時器,先清除前一個。點擊頁面任何一個位置關閉定時器。 1.定時器 定義:當我們需要隔一段時間,再執行一段代碼。或者每隔一段時間,執行一段代碼。我們可以使用定時器。使用場景:例如網站輪播圖的自動滾動。廣告延遲彈出的某些...
摘要:這兩個函數接受定時器的例如我們上面提到的兩個函數產生的定時器,并停止對定時器中指定函數的調用。注意,定時器雖然觸發了,但是并不會立即執行,它只是把需要延遲執行的函數加入了執行隊列,在線程的某一個可用的時間點,這個函數就能夠得到執行。 擼了今年阿里、頭條和美團的面試,我有一個重要發現....... javascript定時器工作原理是一個重要的基礎知識點。因為定時器在單線程中工作,它們表...
閱讀 2043·2021-09-07 10:14
閱讀 1478·2019-08-30 15:53
閱讀 2270·2019-08-30 12:43
閱讀 2861·2019-08-29 16:37
閱讀 754·2019-08-26 13:29
閱讀 2000·2019-08-26 13:28
閱讀 437·2019-08-23 18:33
閱讀 3500·2019-08-23 16:09