函数防抖与函数节流（性能优化）

概念：

函数防抖(debounce) ：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

函数节流(throttle)  ：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

区别：

相同点：都是防止某一时间频繁触发，
不同点：函数防抖是某一段时间内只执行一次，函数防抖尤其是优化搜索框,防止恶意点击;而函数节流是间隔时间执行。

场景： 

  函数防抖

1、search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
2、window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

 函数节流

1、鼠标不断点击触发，mousedown(单位时间内只触发一次)
2、拖拽事件，每拖动1px都会触发onmousemove（可以用throttle优化，每秒触发一次）
3、监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

vue中封装使用

   1.在src下新建utils目录

   2.在utils中的index.js里放函数防抖和函数节流方法

// 防抖
export function _doubounce(fn, delay) {
  var d = delay || 200; //
  var timer; //定时器
  return function() {
    //形成闭包
    var th = this;
    var ags = arguments;
    if (timer) {
      //超过200就清除
      clearTimeout(timer);
    }
    timer = setTimeout(function() {
      timer = null; //防止内存泄漏
      fn.apply(th, ags);
    }, d);
  };
}

// 节流
export function _throttle(fn,interval){
    var last;//上一次时间 
    var interval=interval || 200
    var timer;
    return function(){
         var th=this
         var ags=arguments
         var now =+new Date()
         if (last && now-last < interval) {
             clearTimeout(timer)
            timer=setTimeout(function(){
                last =now
                fn.apply(th,ags)
            },interval)
         } else {
             last =now
             fn.apply(th,ags)
         }
    }
    
}

3.使用

<template>
  <div class="box">
    <div class="box1">
      <el-input v-model="wd" ></el-input>
      <el-button @click="search">搜索</el-button>
    </div>
  </div>
</template>

<script>
import { _doubounce, _throttle } from "@/utils/index.js";

export default {
  data() {
    return {
      wd: "",
    };
  },
  methods: {
    search: _doubounce(function() {//防抖方法
      console.log(this.wd);
    }, 300),
    search: _throttle(function() {//节流方法
      console.log(this.wd);
    }, 300),
  },
};
</script>