1. 函数防抖(debounce)

概念： 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

实现：

function debounce(fn, wait){
  let timer = null;
  return function (){
    let context = this;// 获取当前this
    let args = arguments;// 获取函数传递的参数
    if(timer){
      clearTimeout(timer);
      timer = null; 
    }
    timer = setTimeout(() => {
      fn.apply(context, args);
    }, wait);
  }
}

2. 函数节流(throttle)

概念： 规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

实现：

function throttle(fn, wait) {
  let timer = null;
  return function () {
    let context = this; // 获取当前this
    let args = arguments; // 获取函数传递的参数
    if (!timer) {
      timer = setTimeout(() => {
        timer = null;
        fn.apply(context, args);
      }, wait);
    }
  }
}

3. 使用

<input type="text" id="inp">
<button id="btn">节流点击---2s内只触发一次</button>

<script>
// 防抖函数的使用
let fn = debounce((e) => {
  console.log(e.target.value);
}, 1000);
// 键盘输入后一秒打印input框内容
document.getElementById("inp").addEventListener("keyup", function (e) {
  fn(e, 1, 2, 3);
})

// 节流函数的使用
let fn1 = throttle((e) => {
  console.log(parseInt(Math.random() * 10 + 1), e);
}, 2000);
// 两秒内点击多次只触发一次
document.getElementById("btn").onclick = function (e) {
  fn1(e);
}
</script>