js防抖節流

防抖

不希望某個事件在短時間內瘋狂觸發，影響性能，所以我們設置一個定時器，讓這個事件在一定時間延遲後再執行，如果這個延遲中間中途這個事件又觸發了，那就把上次事件綁定的定時器取消，避免了上次事件重複執行影響性能

• 輸入完畢後過1s查詢

function debounce(fn, delay) {
  let timer;
  return function() {
    if(timer) clearTimeout(timer);
    timer = setTimeout(function(){
      fn.apply(this, arguments)
    }, delay); 
  }
}

• 輸入完畢後立馬查詢，過2s後才能再次查詢(立即查詢)

function debounce(fn, delay) {
  let timer;
  return function() {
    if(timer) clearTimeout(timer);
    let callnow = !timer;
    timer = setTimeout(function(){
      timer = null;
    }, delay); 
    if(callnow) fn.apply(this, arguments);
  }
}

function resize() {
  console.log('視窗改變時需要執行些什麼...')
}

window.addEventListener('resize', debounce(resize, 1000))

節流

相比防抖，節流的概念更通俗，節約流量。如果一個方法在短時間內瘋狂執行，我們希望它每隔一段時間執行。節約一點流量.

• 定時器實現

function throttle(fn, delay = 800) {
  var timer = null;
  var _delay = delay;
  return function(){
    if(!timer) {
      timer = setTimeout(() => {
        timer = null;
        fn.apply();
      }, _delay);
    }
  }
}

• 時間差實現

function throttle(fn, delay = 800) {
  let prev = 0;//上次記錄的時間
  return function(){
  let now = Date.now();//當前時間
  if(now - prev > delay){
        fn.apply(this);
        prev = now;
    }
  }
}

function resize(n) {
  return function () {
    console.log('視窗改變時需要執行些什麼...' + n++)
  }
}
window.addEventListener('resize', throttle(resize(1)))