防抖与节流

防抖

当持续触发事件时，一定时间段内没有再触发时间，时间处理函数才会执行一次，如果设定的时间到来之前，有一次触发了事件，就重新开始延时。

<script>
    function debounce(fn, wait) {
        var timeout = null;
        return function() {
            if(timeout !== null){
                clearTimeout(timeout);
            }
            timeout = setTimeout(fn, wait);

        }
    }
    // 处理函数
    function handle() {
        alert('我被点击了');
    }
    // 滚动事件
    document.getElementById('btn').addEventListener('click', debounce(handle, 1000));
</script>

注：这个按钮所注册的点击事件只有在1s之内没有再次点击该按钮才会执行弹框，如果点击了按钮之后1s之内再次点击按钮，则会以第二次按钮点击的时间为基准，往后延迟1s后执行。

函数节流

当持续触发时间时，保证一定时间段内只调用一次时间处理函数。

    1. 使用时间戳实现
    function throttle(callback,duration){
        var lastTime = new Date().getTime();
        return function() {
          var now = new Date().getTime();
          if(now-lastTime>duration){
              callback();
              lastTime = now;
          }
        }
    }
    2.使用定时器实现
    function throttle(callback,await){
            var timeOutId = null;
            return function () {
                if(!timeOutId){
                    timeOutId = setTimeout(function () {
                        timeOutId = null;
                        callback();
                    },await)
                }
            }
        }
    window.onscroll = throttle(function() {
      console.log('执行了一次');
    },1000)

注：这个按钮的点击事件无论点击多少次，1s内只执行一次。

函数防抖与函数节流的区别

防抖的函数不保证一段时间内执行一次，如果再该段时间里面该事件持续被触发，那么这个事件永远不会执行。

函数节流则时一段事件内无论触发多少次事件，都只会响应一次该事件。