1. 防抖：
- 由于dom操作極其昂貴，所以嘗試過多的dom操作有可能會將瀏覽器搞崩潰，比如onresize、onscroll這類事件操作；
- 為了解決這個問題，引出防抖的概念（某些代碼不可以在沒有間斷的情況下連續重復執行）；
- 方案：第一次調用函數創建一個定時器，在指定時間之后執行代碼；在第二次調用時，清除掉前一次的定時器并重新設置一個；
- 這種方案下，如果第一個定時器已經執行，這個操作就沒意義；如果第一個沒執行，則將其替換為新的定時器；目的是只有在執行函數的請求停止一段時間后才執行；
- 適用于代碼是周期執行的，但是你不能控制請求執行的速率；
- 函數防抖讓一個函數只有在你不斷觸發后停下來歇會才開始執行，中間你操作得太快它直接無視。
// 函數防抖 function debounce(method, context) {clearTimeout(method.tid); // mthod是真實要執行的函數，context是執行的作用域（默認window）method.tid = setTimeout(function() {method.call(context) // 確保方法在適當的環境中執行}, 100); }// onscroll時函數防抖 function scrollFun() {var marginBot = 0;if (document.documentElement) {marginBot = document.documentElement.scrollHeight - (document.documentElement.scrollTop+document.body.scrollTop) - document.documentElement.clientHeight;} else {marginBot = document.body.scrollHeight - document.body.scrollTop - document.body.clientHeight;}if(marginBot <= 0) {// 滾動到底部加載數據操作 } } window.onscroll = function() {debounce(scrollFun); }
?
2. 節流
- 如果我們不希望每次都是要事件結束后等待延遲時間后執行回調；
-
我們可以先給定一個時間段duration，過了這個時間段以后我們執行相應的操作；如果沒有過這個時間段，那么就按照函數節流的思路，開關定時器就ok。
function throttle(method, delay, duration){var timer = null, stime = new Date(); // 記錄下開始執行函數的時間return function() {var context = this, args = arguments,ctime = new Date(); // 記錄下當前時間 clearTimeout(timer); // 函數節流里的思路// 記錄下的兩個時間相減再與duration進行比較if (ctime - stime >= duration) {method.apply(context, args);stime = ctime;}} }window.onresize = throttle(method, 50, 100); // 50ms的間隔內連續觸發的調用，后一個調用會把前一個調用的等待處理掉，但每隔100ms至少執行一次
3. 滾動實例區分下：
? ? normal：滾動會立即觸發事件執行；
? ? throttle： 延遲100ms直到100ms以內沒有事件觸發之后執行，這樣如果一直在操作，有可能一直不會觸發事件發生；
? ? debounce：50ms的間隔內連續觸發的調用，后一個調用會把前一個調用的等待處理掉，但每隔100ms至少執行一次。
4. 滾動到目標節點：
- 獲取目標節點偏移量var len = $('target').offset().top或document.querySelector('target').offsetTop；
- 滾動$('body').animate(scrollTop: len)或document.querySelector('body').scrollTop = len；
