防抖和节流

防抖：

使用场景：频繁输入或操作，最后才触发

如：

1.监听输入框，用户输入完成或暂停后，才触发 change 事件

/**
     * @desc 函数防抖
     * @param fn 函数
     * @param delay 延迟执行毫秒数
     */
 function debounce(fn, delay = 300) {
  // timer 是闭包中的
  let timer = null;
  return function () {
    if(timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.apply(this, arguments);
      timer = null;
    }, delay)
  }
}

function getList(e) {
  // 模拟接口请求数据
  setTimeout(() => {
    console.log(e.target.value);
  }, 1000);
}

let input1 = document.getElementById('input1');
input1.addEventListener('keyup', debounce(getList, 500));

节流：

使用场景：防止短时间多次提交操作，每隔多久才触发一次

1.防止按钮重复点击

2.拖拽元素

/**
     * @desc 节流函数
     * @param fn 函数
     * @param delay 延迟执行毫秒数
     */

// <div id="div-box" draggable="true"></div>

function throttle(fn, delay = 300) {
  let timer = null;
  return function() {
    if(timer) {
      return;
    }
    timer = setTimeout(() => {
      fn.apply(this, arguments);
      timer = null;
    }, delay);
  }
}

function sayHi(e){
  console.log(e.offsetX, e.offsetY);
} 

let div1 = document.getElementById('div-box');
div1.addEventListener('drag', throttle(sayHi, 1000));