JS 函式防抖和函式節流

我們都知道頻繁觸發執行一段js邏輯**對效能會有很大的影響，尤其是在做一些效果實現方面，或者邏輯中需要進行後端請求，更是會導致卡頓，效果失效等結果，所以在處理類似的情況時，可以考慮使用函式節流和函式去抖來解決，至於具體使用哪一種方式，根據實際情況分析定奪,先來講解一些這兩者的概念

函式防抖：在頻繁觸發的情況下，只有足夠的空閒時間，才執行**一次，如果沒有執行完就清除掉，重新執行邏輯

應用場景：高頻觸發以下方法

函式節流和函式防抖兩個概念是有很大區別的，我們用一段**示例來看看其究竟

// 函式節流例子
var can = true;
window.onscroll = function()
can = false;
settimeout(function(), 100);
};

// 函式防抖
var timer = null;
window.onscroll = function()
timer = settimeout(function(), 300);
};

在函式防抖這個例子中，可以看出當事件被監控觸發時候，不論上一次的邏輯有沒有執行完畢，都要清除掉重新執行，函式防抖會更加降低事件被觸發的頻率。

圖示：這樣一整個列表，當我們滑鼠放到訂正情況上時候需要顯示訂正情況的詳細資訊，而有時我們滑鼠滑過的時候可能把每一條的邏輯都觸發，但是這並不是我們想要的，我們只想最後滑鼠留在哪條資料上，才顯示哪一段資料的邏輯，所以根據情況的分析，我們這種情況適用的是函式去抖

**：


}item需要顯示的內容
var event = null,
toggleitem:function (state,item) 
event =settimeout(function () ,100);
}item.isvisible = state;
},

寫在最後的總結

所以最重要的事情就是要首先清楚地區分二者的概念，理解實現的方法，再根據具體的需求來判斷適用哪一種方法來進行優化，二者在功能實現上是有本質區別的。