資訊專欄INFORMATION COLUMN
摘要：為了解決這些問題，就可以使用定時器對函數進行節流。第一次調用函數，創建一個定時器，在指定的時間間隔之后運行代碼。當第二次調用該函數時，它會清除前一次的定時器并設置另一個。
函數節流的目的
從字面上就可以理解，函數節流就是用來節流函數從而一定程度上優化性能的。例如，DOM 操作比起非DOM 交互需要更多的內存和CPU 時間。連續嘗試進行過多的DOM 相關操作可能會導致瀏覽器掛起，有時候甚至會崩潰。尤其在IE 中使用onresize 事件處理程序的時候容易發生，當調整瀏覽器大小的時候，該事件會連續觸發。在onresize 事件處理程序內部如果嘗試進行DOM 操作，其高頻率的更改可能會讓瀏覽器崩潰。又例如，我們常見的一個搜索的功能，我們一般是綁定keyup事件，每按下一次鍵盤就搜索一次。但是我們的目的主要是每輸入一些內容搜索一次而已。為了解決這些問題，就可以使用定時器對函數進行節流。
函數節流的原理某些代碼不可以在沒有間斷的情況連續重復執行。第一次調用函數，創建一個定時器，在指定的時間間隔之后運行代碼。當第二次調用該函數時，它會清除前一次的定時器并設置另一個。如果前一個定時器已經執行過了，這個操作就沒有任何意義。然而，如果前一個定時器尚未執行，其實就是將其替換為一個新的定時器。目的是只有在執行函數的請求停止了一段時間之后才執行。
函數節流的基本模式var processor = {
timeoutId: null,
//實際進行處理的方法
performProcessing: function(){
//實際執行的代碼
},
//初始處理調用的方法
process: function(){
clearTimeout(this.timeoutId);
var that = this;
this.timeoutId = setTimeout(function(){
that.performProcessing();
}, 100);
}
};
//嘗試開始執行
processor.process();
好吧，看得確實有點迷糊。下面通過一個例子來詳細說明，并且在這個基礎模式之上做一個優化處理。
例子場景：實現常見的搜索功能
①沒有使用函數節流的情況下，為input綁定keyup事件處理函數，在控制臺輸出我輸入的內容。
測試主要代碼：
HTMl：
JS：
結果如圖：
可以看出，這種情況下，每按下一個鍵盤鍵，就輸出了一次。短短的一些內容，輸出了14次，如果每一次都是一次ajax查詢請求的話就發了14個請求了。在性能上的消耗可想而知。
②使用基本的函數節流模式的情況。
測試主要代碼：
HTML：
JS：
復制代碼
結果如圖：
可以看出，這種情況下，輸入了好一些內容，只輸出了一次，因為測試的時候設置了兩次輸入間隔是500ms，實際應用可根據情況設置。顯然，這在性能上大大滴得到了優化。不過，這樣的話，有一個新問題，如下圖：
好吧，或許看不出端倪。其實問題就是，假如我不斷地輸入，輸入了很多內容，但是我每兩次之間的輸入間隔都小于自己設置的delay值，那么，這個queryData搜索函數就一直得不到調用。實際上，我們更希望的是，當達到某個時間值時，一定要執行一次這個搜索函數。所以，就有了函數節流的改進模式。
③函數節流增強版
測試的主要代碼：
復制代碼
HTML：
JS：
復制代碼
測試結果如圖：
顯然，連續的輸入，到一定時間間隔之后，queryData函數必然會被調用，但是又不是頻繁的調用。這既達到了節流的目的，又不會影響用戶體驗。
④進一步的優化
進一步的話，就是可以在調用throttle函數之前，先對輸入的內容進行判斷，若其值為空、值不變都不用再調用。這里就不詳說了。
更多學習鏈接
詳細改進實例
節流與去抖
http://www.cnblogs.com/LuckyW...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81703.html
摘要：前言據說阿里有一道面試題就是談談函數節流和函數防抖。糟了，這可觸碰到我的知識盲區了，好像聽也沒聽過這個東西，痛定思痛，趕緊學習學習。概念和例子函數防抖在事件被觸發秒后再執行回調，如果在這秒內又被觸發，則重新計時。 前言 據說阿里有一道面試題就是談談函數節流和函數防抖。糟了，這可觸碰到我的知識盲區了，好像聽也沒聽過這2個東西，痛定思痛，趕緊學習學習。here we go！ showImg...
摘要：作用域安全的構造函數會首先確認對象是正確類型的實例，然后再進行更改，如下這樣就避免了在全局對象上意外更改或設置屬性。在多人協作的項目中，為了避免他們誤改了全局對象，也應使用作用域安全的構造函數。 博客原文地址：Claiyre的個人博客如需轉載，請在文章開頭注明原文地址 在JavaScript中，函數的功能十分強大。它們是第一類對象，也可以作為另一個對象的方法，還可以作為參數傳入另一個函...
閱讀 3623·2021-11-24 10:22
閱讀 3692·2021-11-22 09:34
閱讀 2495·2021-11-15 11:39
閱讀 1534·2021-10-14 09:42
閱讀 3668·2021-10-08 10:04
閱讀 1561·2019-08-30 15:52
閱讀 851·2019-08-30 13:49
閱讀 3024·2019-08-30 11:21
