天天看點

JS程式設計建議——76:要重視函數節流

建議76:要重視函數節流

比起非DOM互動,DOM操作需要更多記憶體和CPU時間。連續嘗試進行過多的DOM相關操作可能會導緻浏覽器變慢甚至崩潰。函數節流的設計思想就是讓某些代碼可以在間斷情況下連續重複執行,實作的方法是使用定時器對函數進行節流。

例如,在第一次調用函數時,建立一個定時器,在指定的時間間隔後執行代碼。當第二次調用時,清除前一次的定時器并設定另一個,實際上就是前一個定時器示範執行,将其替換成一個新的定時器。

var processor = {

};

//嘗試開始執行

Processor.process();

簡化模式:

function throttle(method,context){

}

函數節流解決的問題是一些代碼(特别是事件)的無間斷執行,這個問題嚴重影響了浏覽器的性能,可能會造成浏覽器反應速度變慢或直接崩潰,如resize、mousemove、mouseover、mouseout等事件的無間斷執行。這時加入定時器功能,将事件進行“節流”,即在事件觸發的時候設定一個定時器來執行事件處理程式,可以在很大程度上減輕浏覽器的負擔。類似應用如支付寶中的“導購場景”導航,以及當當網首頁左邊的導航欄等,這些都是為了解決mouseover和mouseout移動過快給浏覽器處理帶來的負擔,特别是減輕涉及Ajax調用給伺服器造成的極大負擔。例如:

oTrigger.onmouseover = function(e) {//如果上一個定時器還沒有執行,則先清除定時器

繼續閱讀