瀏覽器中某些計算和處理要比其他的昂貴的多。例如，DOM操作比起非DOM交互需要更多的內存和CPU時間。連續嘗試進行過多的DOM相關操作可能會導致 瀏覽器掛起，有時候甚至會崩潰。尤其在IE中使用onresize事件處理程序的時候容易發生，當調整瀏覽器大小的時候，該事件連續觸發。在 onresize事件處理程序內部如果嘗試進行DOM操作，其高頻率的更改可能會讓瀏覽器崩潰。
函數節流背后的基本思想是，某些代碼不可以在沒有間斷的情況連續重復執行。第一次調用函數，創建一個定時器，在指定的時間間隔之后運行代碼。當第二次調用 該函數時，它會清除前一次的定時器并設置另一個。如果前一個定時器已經執行過了，這個操作就沒有任何意義。然而，如果前一個定時器尚未執行，其實就是將其 替換為一個新的定時器。目的是只有在執行函數的請求停止了一段時間之后才執行。
function throttle ( method , context ){ clearTimeout ( method.tId ); method.tId = setTimeout ( function () { method.call ( context ); } , 100); }應用舉例:
假設有一個<div/>元素需要保持它的高度始終等同于寬度，可作如下編碼:
function resizeDiv(){ var div = document.getElementById("mydiv"); div.style.height = div.offsetWidth + "px"; } window.onresize = function(){ throttle(resizeDiv); }這里，調整大小的功能被放入了一個叫做resizeDiv的單獨函數中，然后onresize事件處理程序調用throttle()并傳入 resizeDiv函數，而不是直接調用resizeDiv()。多數情況下，用戶是感覺不到變化的，雖然給瀏覽器節省的計算可能非常大。
下面是其他網友的補充
今天主要寫寫我們平時工作中需要的函數節流。可能有的朋友對函數節流沒有意識。其實，在工作中，很多場景都需要我們進行js的節流。最常見的是屏幕伸縮resize，以及touchmove或者scroll等事件的時候。大家不知道有沒有看我之前寫的文章！jquery判斷頁面滾動條上滾下滾，touchmove的滑動方向，大家在使用這些例子的時候，會發現頁面不停的觸發touchmove或者scroll因為這里沒有關系到頁面的重繪，因此，我在這里沒有使用javascript函數節流。但是，當我們使用window.onresize的時候，也會不停的觸發resize事件！這里就會關系到頁面的重新繪制問題了。因此，在window的resize的時候，我們推薦大家使用函數節流的方式！
javascript函數節流簡介
假如你對我上面一大坨文字感到頭大，沒關系，我在這里簡單舉例說明一下函數節流吧！例如當我們使用
$(window).resize(function(){ console.log("haorooms window resize"); })會發現：
這里會輸出好多次。我們簡單的縮小一下窗口，就會不停的觸發！
這樣在div很多的時候，頁面不停重繪，要是遇到版本比較低的IE等，很可能會出現瀏覽器崩潰的現象！為了避免這種情況，我們可以用函數節流的方式?；镜乃枷胧牵旱谝淮握{用函數的時候，我們創建一個定時器，在指定時間間隔之后運行代碼，第二次調用的時候，會清楚前一個定時器，并重新設置一個。如果前一個定時器已經執行過了，那么這個操作就沒有有意了，如果定時器尚未執行，就會將其替換為一個新的定時器。目的是在執行函數停止了一段時間之后再執行。
用對象的方式可以如下寫：
var haoroomstest={ timeoutId:null, performProcessing:function(){ console.log("resize"); }, process:function(){ clearTimeout(this.timeoutId); var that=this; this.timeoutId=setTimeout(function(){ that.performProcessing(); },500) } }這樣之后，我們再用：
$(window).resize(function(){ haoroomstest.process(); })
這樣就會減少請求，減少dom重繪，達到節流的目的！
函數節流其他方式
除了我們運用對象的方式，網上及資料中也介紹了關于函數節流的其他方法和方式，我下面簡單介紹幾種！
函數方式一
function throttle(method,context){ clearTimeout(method.tId); method.tId=setTimeout(function(){ method.call(context); },100); }我們如下使用
function resizeDIv(){ console.log("haorooms") } $(window).resize(function(){ throttle(resizeDIv) })和上面對象實現了同樣的效果！
函數方式二
網上還有一種比較流行的節流方式，我在這里寫一下！
function throttle(method,delay){ var timer=null; return function(){ var context=this, args=arguments; clearTimeout(timer); timer=setTimeout(function(){ method.apply(context,args); },delay); } }然后可以這么寫：
function resizeDIv(){ console.log("haorooms") } window.onresize=throttle(resizeDIv,500);新需求
我們在做模糊搜索智能聯想提示的時候，會在input上面綁定keyup事件。但是我又不想觸發的那么頻繁，用上面的方式就會有問題。因此，在上面的函數基礎上稍加改動，如下：
function throttle(method,delay,duration){ var timer=null, begin=new Date(); return function(){ var context=this, args=arguments, current=new Date();; clearTimeout(timer); if(current-begin>=duration){ method.apply(context,args); begin=current; }else{ timer=setTimeout(function(){ method.apply(context,args); },delay); } }}這樣觸發就不會有之前那么頻繁了！
新聞熱點
疑難解答
