什么是防抖与节流
防抖节流一般都放在一起说，随便一搜都是两者的解释与区别，这里就不copy了，仅记录我自己的理解。
两者都是针对高频函数做的优化，记住其中一个，另一个就知道了。一个是time内只执行一次；另一个是延迟time后执行一次，若time内再次被执行，重头计算time。
简而言之，节流相当于游戏的技能冷却，用过一次后cd时间内不能再用，防抖有种随着高频操作的进行不断延迟函数执行的感觉，想要执行必须要停下等time过了才可以。
两者均有典型的应用例子，比如节流经常用在滚动监听中，防抖经常用在输入框搜索中。
节流在项目中的应用场景
项目是学生抢课，用户选中课之后点击提交，等待回馈结果，在等待过程中，用户难免会不停的点击提交按钮，或者不停的刷新页面，难道请求也一直随着点击发送吗，当然不可，本就是高并发请求，这样会给后端造成巨大的压力。
那是做点击防抖还是点击节流呢？
做点击节流。
逆向思维想一下，若是做防抖的话，用户一直点，岂不是一直不发送请求？根据实际情况，这里选择做点击节流。
节流函数代码
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) } }
防抖函数使用跟节流一样
原文：https://www.cnblogs.com/pumkz/p/15224157.html