前端节流与防抖

1.理解
防抖(debounce)

search搜索联想，用户在不断输入值时，用防抖来节约请求资源。

window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

节流(throttle)

鼠标不断点击触发，mousedown(单位时间内只触发一次)

监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

2.实例
2.1 防抖

js

<input type="text" class="autocomplete">

// 被debounce的函数，http请求，事件处理函数等等
function make_ajax_request(){
     
    // 这是一个调用后端api的方法
}
// 监听事件并且调用lodash的debounce方法
$('.autocomplete').on('keydown',
     _.debounce(make_ajax_request, 1300));
});

vue

<template>
  <input @input="debounceHandleInput"/>
</template>

<script>
import _ from 'lodash';

export default {
     
  name: 'debounce',
  data() {
     
    return {
     
      starTime: 0,
      endTime: 0,
      delay: 1000,
    };
  },
  computed: {
     
    debounceHandleInput() {
     
      return _.debounce(this.handleInput, this.delay);
    },
  },
  methods: {
     
    handleInput(e) {
     
      console.log(`debounce wait时间为${
       this.delay}ms`);
      console.log('触发了input事件', e.target.value);
      this.startTime = new Date().getTime();
      this.remoteMethod();
    },
    remoteMethod() {
     
      setTimeout(() => {
     
        const result = `后端请求已完成！`;
        this.endTime = new Date().getTime();
        const costTime = this.endTime - this.startTime;
        console.log(result);
        console.log(`耗时${
       costTime}毫秒`);
      }, 2000);
    },
  },
};
</script>

打印结果：
debounce wait时间为1000ms
触发了input事件 13131
后端请求已完成！
耗时2000毫秒

2.2节流

js

 var throttle = function(func, delay) {
     
    var timer = null; // 使用闭包，缓存变量
    var prev = Date.now(); // 最开始进入滚动的时间
    return function() {
     
      var context = this;   // this指向window
      var args = arguments;
      var now = Date.now();
      var remain = delay - (now - prev); // 剩余时间
      clearTimeout(timer);
      // 如果剩余时间小于0，就立刻执行
      if (remain <= 0) {
     
        func.apply(context, args);
        prev = Date.now();
      } else {
     
        timer = setTimeout(func, remain);
      }
    }
  }
  function handle() {
     
      console.log(Math.random());
  }
  var container = document.getElementById('container')
  container.addEventListener('scroll', throttle(handle, 1000));

<script>
    function throttle(fn,delay){
     
        var starttime=0;
        return function f() {
     
            var nowtime=Date.now();
            if (nowtime-starttime>delay){
     
                fn.call(document);
                // fn.call(this);
                // fn();
                starttime=nowtime;
            }
        }
    }
    document.onmousemove=throttle(function () {
     
            console.log(Math.random());
        console.log(this);
        },1000);
</script>