防抖和节流

防抖：
高频率触发的事件，在指定的单位时间内，只响应最后一次，如果在指定的时间再次触发，则重新计算时间(后面触发的事件执行，替代了前面的事件)

function debounce(fn,time) {
  let timeout = null; // 创建一个标记用来存放定时器的返回值
  return function () {
    clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉
    timeout = setTimeout(() => { // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
      fn.apply(this, arguments); // arguments是传入的参数
    }, time);
  };
}
function sayHi() {
  console.log('防抖成功');
}
var inp = document.getElementById('inp');
inp.addEventListener('input', debounce(sayHi,5000)); // 防抖

节流：
高频率触发的事件，在指定的单位时间内，只响应第一次(前面触发的执行前，忽略后面的事件)

function throttle(fn，time) {
  let canRun = true; // 通过闭包保存一个标记
  return function () {
    if (!canRun) return; // 在函数开头判断标记是否为true，不为true则return
    canRun = false; // 立即设置为false
    setTimeout(() => { // 将外部传入的函数的执行放在setTimeout中
      fn.apply(this, arguments);
      // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。当定时器没有执行的时候标记永远是false，在开头被return掉
      canRun = true;
    }, time);
  };
}
function sayHi(e) {
  console.log(e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi,500));

防抖和节流的使用场景
防抖（debounce）
1、search搜索联想，用户在不断输入值时，用防抖来节约请求资源；
2、window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
节流（throttle）
1、鼠标不断点击触发，mousedown(单位时间内只触发一次)；
2、监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断