什么是防抖事件
概念:
在事件被触发n秒后再执行回调函数。若在这n秒内又被触发,则重新计时。
典型的案例:【输入搜索】:输入结束后n秒才进行搜索请求,n秒内又输入的内容,就重新计时。
什么是节流事件
概念:
规定在一个单位时间内,只能触发一次函数。若这个单位时间内触发多次函数,只有一次生效。
典型的案例:鼠标不断点击触发,规定在n秒内多次点击只有一次生效。
代码实现:
防抖: 设置一个定时器,通过闭包,抓住定时器变量,控制定时器的添加和清除
节流: 通过一个布尔变量作为状态,判断代码是否需要执行
第一步:在utils工具文件夹下建一个utils.js文件
//防抖
/**
* @description: 在vue中使用的防抖函数
* @param {Sting} fn 传入的函数
* @param {Number} time 延迟的时间
* @returns 处理后的执行函数
*/
export function _debounce(fn, time=200) {
let t = null;
return function() {
let _self = this,
args = arguments;
if (t) {
clearTimeout(t);
}
t = setTimeout(() => {
fn.apply(_self, args);
}, time);
};
}
//节流
/**
*
* @param {String} fn 函数
* @param {Number} delay 延迟的时间
*/
export function _throttle(fn, delay=200) {
let t = null,
begin = new Date().getTime();
return function() {
let _self = this,
args = arguments,
cur = new Date().getTime();
clearTimeout(t);
if (cur - begin >= delay) {
fn.apply(_self, args);
begin = cur;
} else {
t = setTimeout(() => {
fn.apply(_self, args);
}, delay)
}
}
}
第二步:在vue组件中使用
防抖:vue代码
<template>
<input v-model="name" @change='handleChange' />
</template>
import {_debounce} from '@/utils/utils';
<script>
export default {
methods: {
handleChange:_debounce(function(value){
this.requestGetInfo(value)
},1000),
//搜索框需要执行的事件:根据搜索框数据在某个接口里获取数据
requestGetInfo(value){
console.log(value);
.....
}
}
};
</script>
节流: vue代码
<template>
<button @click='handleSubmit' />
</template>
import { _throttle} from '@/utils/utils';
<script>
export default {
methods: {
handleSubmit:_throttle(function(){
this.requestPostInfo()
},1000),
//需要执行的事件:按钮提交数据
requestPostInfo(){
.....
}
}
};
</script>
🎯注意:
- 防抖/节流函数作为触发事件对象的value(值),而不是在触发事件的函数体内执行;
- 若想使用this关键字访问到Vue实例,那么防抖/节流回调函数必须使用function关键字声明,不能使用箭头函数(因为箭头函数的this是由创建函数的上下文决定的 ), 若使用箭头函数this是undefined。