JavaScript---防抖和节流

相同:在不影响客户体验的前提下,将频繁的回调函数,进行次数缩减.避免大量计算导致的页面卡顿。

不同:防抖是将多次执行变为最后一次执行，节流是将多次执行变为在规定时间内只执行一次。

防抖是指触发事件后在规定时间内回调函数只能执行一次，如果在规定时间内又触发了该事件，则会重新开始算规定时间。

主要运用在：输入搜索联想，用户在不断输入值时，用防抖来节约请求资源；按钮点击:收藏,点赞等。

节流是指当持续触发事件时，在规定时间段内只能调用一次回调函数。如果在规定时间内又触发了该事件，则什么也不做,也不会重置定时器。

主要运用在：鼠标不断点击触发，点击事件在规定时间内只触发一次；监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断。

  1. 防抖：

  function debounce(fn) {

    let timer = null;

    return function() {

      clearTimeout(timer);

      timer = setTimeout(() => {

        fn.call(this.arguments);

      }, 1000);

    }

  }

  2. 节流：

  function throttle(fn) {

    let timer = true;

    return function() {

      if (!timer) {

        return;

      }

      timer = false;

      setTimeout(() => {

        fn.call(this, arguments);

        timer = true;

      }, 1000);

    }

  }