防抖函数的使用

在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。那么此时， 我们可以使用防抖函数，那么下面写一个简单的防抖函数

      // 防抖函数
      const debounce = (fn, duration) => {    
        let timeout = null;    
        return () => {        
          if(timeout !== null) {
            clearTimeout(timeout)
          }        
          timeout = setTimeout(fn, wait);
        }
      }
      // 事件处理函数
      const handle = () => {    
        const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
　　    console.log('滚动条位置：' + scrollTop);
      }
      // 滚动条监听
      window.addEventListener('scroll', debounce(handle, 500));

这样子， 触发滚动事件的时候， 不会立即触发 handle事件， 只有当0.5s内没有再次触发滚动事件的时候， handle才会触发，这样子对函数调用的频率做了大大的限制，大幅度减轻浏览器的负担