JavaScript 函數節流

 DOM 操做的交互須要更多的內存和 CPU 時間，連續進行過多的 DOM 相關的操做可能會致使瀏覽器變慢甚至崩潰，函數節流的設計思想是讓某些代碼能夠在間斷的狀況下連續重複執行，實現該方法能夠使用定時器對該函數進行節流操做;

好比：第一次調用函數的時候，建立一個定時器，在指定的時間間隔下執行代碼。當第二次執行的時候，清除前一次的定時器並設置另外一個，將其替換成一個新的定時器;

 

// 以下簡單函數節流代碼演示
var throttle = {
    timeoutId: null,
    // 須要執行的方法
    preformMethod: function(){
    
    },
    // 初始化須要調用的方法
    process: function(){
        clearTimeout(this.timeoutId);
        var self = this;
        self.timeoutId = setTimeout(function(){
            self.preformMethod();
        },100);
    }
};
// 執行操做
throttle.process();

 

函數節流解決的問題是一些代碼 (好比事件) 無間斷的執行，這可能會影響瀏覽器的性能，瀏覽器變慢或者直接崩潰。好比對於 mouseover 事件或者 click 事件，好比點擊 tab 項菜單，無限的點擊，有可能會致使瀏覽器會變慢操做，這時候咱們能夠使用函數節流的操做來解決；

 

參考：理解函數節流