vue项目中实现输入框防抖功能（and节流）

防抖函数的原理：

• 只有在事件触发的时候才会延迟加载，如果在延迟加载之前再次触发，则会刷新延迟时间重新延迟，触发次数有且只有触发一次；
  使用场景：
• 防抖函数：指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。场景：input验证、搜索联想、resize
• 节流函数：指连续触发事件但是在 n 秒中只执行一次函数。
  场景：按钮点击、下拉加载、鼠标滚动、拖拽动画（节流通常用在比防抖刷新更频繁的场景下，而且大部分是需要涉及动画的操作。）

实例：
例如在vue-cli脚手架中使用防抖函数来进行提升性能
vue-cli：定义一个util.js，添加以下代码

// 函数防抖
export function debounce(fn, wait) {
    let timeout = null;
    wait = wait || 600;
    return function () {
      let that = this;
      if(timeout !== null)   clearTimeout(timeout);  
      timeout = setTimeout(() => {
        fn.apply(that);
      }, wait);
    }    
}
//（注意：我们在vue-cli中自定义方法必须要export抛出，不然组件读取不到）

//函数节流
 const throttle = (fn, interval) => {
     var _self = fn, // 保存需要被延迟执行的函数引用
         timer, // 定时器
         firstTime = true; // 是否是第一次调用
     return function () {
         var args = arguments;
         var _me = this;
         if (firstTime) { // 如果是第一次调用不需要延迟
             _self.apply(_me, args); // 执行fn函数并且修正此函数中this所运行的上下文指向
             return firstTime = false;
         }
         if (timer) { // 如果定时器还在，说明前一次延迟执行还没有完成
             return false;
         }
         timer = setTimeout(function () { // 延迟一段时间执行
             clearTimeout(timer);
             timer = null;
             _self.apply(_me, args); // 执行fn函数并且修正此函数中this所运行的上下文指向
         }, interval || 500);
     }
 }
 export default throttle

使用和引用组件：

//在需要用到的页面引入
import {debounce} from "@/utils/utils" //防抖
import throttle from '../utils/throttle' //节流

调用方法：

//在需要用到的页面写方法
methods: {
      inputNum: debounce(function(){
          console.log('防抖');
      }, 1000),//这个1000代表事件延迟一秒执行
      
      clickBtn: throttle(function () {
      console.log('节流')
    }, 1500) //1.5s内只会执行一次
  }