Vue最新防抖方案

函數(shù)防抖（debounce）：當持續(xù)觸發(fā)事件時，一定時間段內(nèi)沒有再觸發(fā)事件，事件處理函數(shù)才會執(zhí)行一次，如果設定的時間到來之前，又一次觸發(fā)了事件，就重新開始延時。舉個栗子，持續(xù)觸發(fā)scroll事件時，并不執(zhí)行handle函數(shù)，當1000毫秒內(nèi)沒有觸發(fā)scroll事件時，才會延時觸發(fā)scroll事件。

函數(shù)節(jié)流（throttle）：當持續(xù)觸發(fā)事件時，保證一定時間段內(nèi)只調(diào)用一次事件處理函數(shù)。節(jié)流通俗解釋就比如我們水龍頭放水，閥門一打開，水嘩嘩的往下流，秉著勤儉節(jié)約的優(yōu)良傳統(tǒng)美德，我們要把水龍頭關(guān)小點，最好是如我們心意按照一定規(guī)律在某個時間間隔內(nèi)一滴一滴的往下滴。舉個栗子，持續(xù)觸發(fā)scroll事件時，并不立即執(zhí)行handle函數(shù)，每隔1000毫秒才會執(zhí)行一次handle函數(shù)。

防抖實例：

<script>
const delay = (function () {
  let timer = 0
  return function (callback, ms) {
    clearTimeout(timer)
    timer = setTimeout(callback, ms)
  }
})()
export default {
methods：{
fn() {
      delay(() => {
        //執(zhí)行部分
      }, 500)
}
}
}
</script>



節(jié)流實例：

var throttle = function(func, delay) {            
    var timer = null;            
    return function() {                
        var context = this;               
        var args = arguments;                
        if (!timer) {                    
            timer = setTimeout(function() {                        
                func.apply(context, args);                        
                timer = null;                    
            }, delay);                
        }            
    }        
}        
function handle() {            
    console.log(Math.random());        
}        
window.addEventListener('scroll', throttle(handle, 1000));



更新

// 防抖:多次觸發(fā)事件后，事件處理函數(shù)只執(zhí)行一次，并且是在觸發(fā)操作結(jié)束時執(zhí)行。
export function debounce(fn, delay) {
  var delay = delay || 200;
  var timer;
  return function () {
    var th = this;
    var args = arguments;
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(function () {
      timer = null;
      fn.apply(th, args);
    }, delay);
  };
}
// 節(jié)流:觸發(fā)函數(shù)事件后，短時間間隔內(nèi)無法連續(xù)調(diào)用，只有上一次函數(shù)執(zhí)行后，過了規(guī)定的時間間隔，才能進行下一次的函數(shù)調(diào)用。
export function throttle(fn, interval) {
  var last;
  var timer;
  var interval = interval || 200;
  return function () {
    var th = this;
    var args = arguments;
    var now = +new Date();
    if (last && now - last < interval) {
      clearTimeout(timer);
      timer = setTimeout(function () {
        last = now;
        fn.apply(th, args);
      }, interval);
    } else {
      last = now;
      fn.apply(th, args);
    }
  };
}

作者：Vam的金豆之路

主要領(lǐng)域：前端開發(fā)

我的微信：maomin9761

微信公眾號：前端歷劫之路