防抖
指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间
**js**
const debounce=function(fn, delay){
let timer = null
return function(){
let content = this;
let args = arguments;
if(timer){
clearTimeout(timer)
}
timer = setTimeout(()=>{
fn.apply(content,args)
}, delay)
}
}
export default debounce
**使用**
import debounce from "@/common/debounce"
changeSeletc:debounce(function() {
console.log('防抖：',this.serves)
},500),
**VUE3**
import debounce from "@/common/debounce"
const fn = debounce(function () {
console.log("我是要执行的函数");
}, 1000);
节流
指连续触发事件但是在 n 秒中只执行一次函数。
**js**
const throttle=(func, delay) => {
// 缓存一个定时器
let timer = null
// 这里返回的函数是每次用户实际调用的节流函数
return function(...args) {
if (!timer) { //判断timer是否有值,如果没有则说明定时器不存在即可继续执行
timer = setTimeout(() => { //关
func.apply(this, arguments)
timer = null; //开
}, delay)
}
}
}
export default throttle
**使用**
import throttle from "@/common/throttle"
methods:{
submit:throttle(function() {
console.log('节流')
},500)
}
