节流（throttle）防抖（debounce）函数

我们在写项目时，难免会遇到点赞获取最后一次触发或者只在第一次触发的点赞有效，一直滚动加载到最后才触发接口调用，实时搜索等场景。在这些场景下就会用到节流防抖函数。

1.防抖(debounce)

        在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；典型的案例就是输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。

/**
 * @methodName: 防抖函数
 * @param: Function fn 延时调用函数
 * @param: Number delay 延时时间
 * @return: Function 延迟执行方法
 **/
export function debounce(fn,delay){
  let timeout =null
  delay = delay || 1000;
  return function (){
    let _this = this
    let _ags = arguments;
    if (timeout !==null) clearTimeout(timeout);
    timeout = setTimeout(()=>{
      fn.apply(_this,_ags)
    },delay)
  }
}

2.节流(throttle)

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

/**
    * @methodName: 节流函数
    * @param: Function fn 延时调用函数
    * @param: Number delay 延时时间
    * @param: Number least 至少多长时间触发一次
    * @return: Function 延迟执行方法
    **/
export function throttle(fn,delay,least = 0){
  let timer = null
  let previous = null
  return function (){
    let _this = this
    let _ags = arguments;
    let now = new Date()
    if (!previous) previous = now
    if (now-previous > least){
      fn.apply(_this,_ags)
      previous = now //重置上一次开始时间
    }else {
      clearTimeout(timer)
      timer = setTimeout(function (){
        fn.apply(_this,_ags)
      },delay)
    }
  }
}

使用

//引入
import {debounce,throttle} from "@/utils/debounce";

//方法内写入
 inputMethod:debounce(function (e){ 
    //业务逻辑
 },500),