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)))