---防抖节流---

首先我们做一个小实验

防抖

  window.onscroll = showTop; //连续不断的运行
  // window.onscroll = time(showTop, 1000); //time每隔1000毫秒调用一次
  function showTop() {
    // 滚动位置
    var scrollTop =
      document.body.scrollTop || document.documentElement.scrollTop;
    console.log(scrollTop);
  }

可以看出我们滑动后会一直不断触发，大概触发了几十次上百次(在正常应用中是十分浪费的），那有没有什么办法可以让它少报几次，或者按照我们所希望的时间报给我们一次呢。

简单的防抖应用 window.onscroll = time(showTop, 1000); //time每隔1000毫秒调用一次 function showTop() { // 滚动位置 var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; console.log(scrollTop); } function time(fn, delay) { let timer = null; //闭包实现 return function () { if (timer) { clearTimeout(timer); } timer = setTimeout(showTop, 1000); }; }

效果如上↑ 划动到底部后没有之前那样不断的触发，十分的耗能，如果网页内容过多又不节能，那么会被卡死。 设置了延迟一秒后触发，如果一秒内仍然触发那么终止前一个一秒定时重新定时，完整计时后才触发一次。 这样可以避免在短时间内大量触发同一时间，在特定时间内只执行一次。

防抖问题：用户在不断滚动页面时，函数一直不生效，那么这个时候我们就可以使用节流来解决

节流：

  window.onscroll = throttle(showTop, 1000); //time每隔1000毫秒调用一次
  function showTop() {
    // 滚动位置
    var scrollTop =
      document.body.scrollTop || document.documentElement.scrollTop;
    console.log(scrollTop);
  }
  function throttle(fn, delay) {
    let open = true; //设置开关
    return function () {
      if (!open) {//如果未开启不进入
        return false;//终止后面的程序
      }
      open = false;
      setTimeout(() => {
        fn(); //调用showTop方法
        open = true; //重新打开开关
      }, delay);
    };
  }
  
  

现实应用防抖就足够了，根据实际来斟酌使用哪一种方法