防抖：搜索框搜索输入。只需用户最后一次输入完，再发送请求 节流：滚动加载，加载更多或滚到底部监听

10-防抖和节流

• 防抖 debounce ：隔一段时间才触发,如果再次时间内再次触发则重新计时
• 节流 throttle ：在设定之间间隔内执行一次

防抖 debounce：隔一段时间才触发,如果再次时间内再次触发则重新计时

const btn1 = document.querySelector("#btn1");

function debounce(fn, delay) {
var time = null;
return function () {
  // fn()
  // 不让定时器执行
  clearTimeout(time);
  time = setTimeout(() => {
    fn();
  }, delay);
};
}
function handleBtn1() {
console.log("请求接口");
}
btn1.onclick = debounce(handleBtn1, 500);

节流 throttle：在设定之间间隔内执行一次

记录上一次点击的时间 和本次点击的时间进行对比， 符合时间间隔则执行函数否则不执行

const btn2 = document.querySelector("#btn2");

function throttle(fn, delay) {
var lastTime = 0;
return function () {
  var nowTime = new Date().getTime();
  if (nowTime - lastTime > delay) {
    fn();
    lastTime = nowTime;
  }
};
}
btn2.onclick = throttle(handleBtn1, 500);