Javascript函数防抖与节流的理解以及在vue和原生js中的使用

防抖和节流的目的都是为了减少不必要的计算，不浪费资源，只在适合的时候再进行触发计算。

一、函数防抖（debounce）

1.定义： 事件触发停止一定时间后才会执行响应的函数，期间如果重复调用动作，重新计算时间。类似于，按下一个弹簧，只有你松手的时候弹簧才会弹起。本质上是将多次操作合并为一次操作。可用一个定时器维护，事件触发后wait时间内如果事件重复触发，那么取消当前定时器，重新设置一个时延为wait的定时器。

2.实现原理
函数防抖的基本思想是设置一个定时器，在指定时间间隔内运行代码时清除上一次的定时器，并设置另一个定时器，直到函数请求停止并超过时间间隔才会执行。

3.使用场景
文本框输入搜索（连续输入时避免多次请求接口）

4.代码实现

/**
 * 函数防抖
 */
export function debounce(fn, t) {
   
  // 记录上一次的延时器
  var timer = null;
  var delay = t || 200;
  return function() {
   
    var args = arguments;
    var that = this;
    // 清除上一次延时器
    clearTimeout(timer)
    timer = setTimeout(function() {
   
        fn.apply(that,args)
    }, delay);
  }
}

二、函数节流
1.定义
规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效； 典型的案例就是鼠标不断点击触发，规定在n秒内多次点击只有一次生效。

2.实现原理
其原理是用时间戳来判断是否已到回调该执行时间，记录上次执行的时间戳，然后每次触发 scroll 事件执行回调，回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段，如果是，则执行，并更新上次执行的时间戳。

3.使用场景
resize、scroll、mousemove等事件触发监听

4.代码实现

    /**
     * 函数节流
     */
    export function throttle(fn,t){
   
      var lastTime;
      var timer;
      var delay = t || 200;
      return function() {
   
        var args = arguments;
        // 记录当前函数触发的时间
        var nowTime = Date.now();
        if (lastTime && nowTime - lastTime < delay) {
   
          clearTimeout