防抖debounce 和 节流 throttle

防抖：

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

存在的意义：如果事件处理函数调用的频率无限制，会加重浏览器的负担，浏览器的性能是有限的，导致用户体验非常糟糕。需要减少调用频率，同时又不影响实际效果。 

实现效果：如果短时间内大量触发同一事件，只会执行一次函数。

如何实现：利用setTimeout()和clearTimeout() -

import _ from 'lodash';
  
export default {
  name: 'Test',
  data () {
    return {
    }
  },
  methods:{
    // 显示消息时增加节流（最多1秒钟执行一次）
    showAlert: _.throttle(function(message){
      console.log((new Date()).format("hh:mm:ss"), message);
    }, 1000)
  },
  // 页面创建时自动加载数据
  created() {
  }
}

节流：

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

存在的意义：如果事件处理函数调用的频率无限制，会加重浏览器的负担，浏览器的性能是有限的，导致用户体验非常糟糕。需要减少调用频率，同时又不影响实际效果。

实现效果：如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。

如何实现：利用setTimeout()和clearTimeout() 

差距：

防抖：过了时间才会触发第一次

       常用于：搜索框input事件、页面resize事件、拖动滚动条事件等

                    为什么：因为都是只需要最终值的事件

节流：第一次触发过后 过了时间才会触发第二次

       常用于：按钮、鼠标移动事件等

                    为什么：需要先触发一次