瀏覽器中某些計算和處理要比其他的昂貴的多。例如，DOM 操作比起非 DOM 交互需要更多的內(nèi)存和 CPU 時間。連續(xù)嘗試進(jìn)行過多的 DOM 相關(guān)操作可能會導(dǎo)致 瀏覽器掛起，有時候甚至?xí)罎?。尤其?IE 中使用 onresize 事件處理程序的時候容易發(fā)生，當(dāng)調(diào)整瀏覽器大小的時候，該事件連續(xù)觸發(fā)。在 onresize 事件處理程序內(nèi)部如果嘗試進(jìn)行 DOM 操作，其高頻率的更改可能會讓瀏覽器崩潰。
函數(shù)節(jié)流背后的基本思想是，某些代碼不可以在沒有間斷的情況連續(xù)重復(fù)執(zhí)行。第一次調(diào)用函數(shù)，創(chuàng)建一個定時器，在指定的時間間隔之后運(yùn)行代碼。當(dāng)?shù)诙握{(diào)用 該函數(shù)時，它會清除前一次的定時器并設(shè)置另一個。如果前一個定時器已經(jīng)執(zhí)行過了，這個操作就沒有任何意義。然而，如果前一個定時器尚未執(zhí)行，其實就是將其 替換為一個新的定時器。目的是只有在執(zhí)行函數(shù)的請求停止了一段時間之后才執(zhí)行。
function throttle (method , context){
clearTimeout (method.tId);
method.tId = setTimeout ( function () {
method.call (context);
} , 100);
} 假設(shè)有一個 <div/> 元素需要保持它的高度始終等同于寬度，可作如下編碼:
function resizeDiv(){
var div = document.getElementById("mydiv");
div.style.height = div.offsetWidth + "px";
}
window.onresize = function(){
throttle(resizeDiv);
} 這里，調(diào)整大小的功能被放入了一個叫做 resizeDiv 的單獨函數(shù)中，然后 onresize 事件處理程序調(diào)用 throttle()并傳入 resizeDiv 函數(shù)，而不是直接調(diào)用 resizeDiv()。多數(shù)情況下，用戶是感覺不到變化的，雖然給瀏覽器節(jié)省的計算可能非常大。
掃碼關(guān)注鍍金池微信號
手機(jī)訂課，優(yōu)惠多多