vue 点击操作的节流优化，节流的使用。

什么是防抖与节流

防抖节流一般都放在一起说，随便一搜都是两者的解释与区别，这里就不copy了，仅记录我自己的理解。

两者都是针对高频函数做的优化，记住其中一个，另一个就知道了。一个是time内只执行一次；另一个是延迟time后执行一次，若time内再次被执行，重头计算time。

简而言之，节流相当于游戏的技能冷却，用过一次后cd时间内不能再用，防抖有种随着高频操作的进行不断延迟函数执行的感觉，想要执行必须要停下等time过了才可以。

两者均有典型的应用例子，比如节流经常用在滚动监听中，防抖经常用在输入框搜索中。

节流在项目中的应用场景

项目是学生抢课，用户选中课之后点击提交，等待回馈结果，在等待过程中，用户难免会不停的点击提交按钮，或者不停的刷新页面，难道请求也一直随着点击发送吗，当然不可，本就是高并发请求，这样会给后端造成巨大的压力。

那是做点击防抖还是点击节流呢？

做点击节流。

逆向思维想一下，若是做防抖的话，用户一直点，岂不是一直不发送请求？根据实际情况，这里选择做点击节流。

节流函数代码

　/**

    * @param {Function} func

    * @param {number} wait

    * @param {boolean} immediate

    * @return {*}

    */

export function throttle(func, wait, immediate) {
  let timeout, args, context, timestamp, result

  const later = function() {
    // 据上一次触发时间间隔
    const last = +new Date() - timestamp

    // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
    if (last < wait && last > 0) {
      timeout = setTimeout(later, wait - last)
    } else {
      timeout = null
      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
      if (!immediate) {
        result = func.call(context, args)
        if (!timeout) context = args = null
      }
    }
  }

  return function(...args) {
    context = this
    timestamp = +new Date()
    const callNow = immediate && !timeout
    // 如果延时不存在，重新设定延时
    if (!timeout) timeout = setTimeout(later, wait)
    if (callNow) {
      result = func.apply(context, args)
      context = args = null
    }
    return result
  }
}

　　

节流函数使用

<button @click="submit">提交</button>

import {throttle}from "写节流函数的文件地址"

submit:debounce(function(a,b,c){
  //业务逻辑
},lateTime,true)

 

自行研究出现的问题（所贴代码中已解决）

　　发现函数内的this无效,函数的this已经被用了，节流函数内赋值一下就可以了。

　　发现函数参数无效,funct.call(_this,...arguments)和funct.apply(_this,argus)用混了。

 

防抖函数代码

/**
 * @param {Function} fun
 * @param {number} wait
 */
export function debounce(fun,wait){

 let timer,_this; return function (){ _this = this; if(timer){ clearTimeout(timer) } timer = setTimeout(()=>{ fun.call(_this,...arguments); },wait) } }

防抖函数使用跟节流一样