前言
防抖的目的是为了
减少不必要的计算
,不浪费资源
,只在适合
的时候再进行触发计算
。
防抖函数
在
事件被触发n秒后再执行回调
,如果在这n秒内又被触发,则重新计时
;典型的案例就是输入搜索:输入结束后n秒才进行搜索请求,n秒内又输入的内容,就重新计时。函数防抖的基本思想是
设置一个定时器
,在指定时间间隔内运行代码时清除上一次的定时器,并设置另一个定时器,直到函数请求停止并超过时间间隔
才会执行。搜索:每输入一个字符就会执行一次,这就可以使用防抖。
vue中防抖的演示
防抖代码
export function debounce(fn, delay) {
// 记录上一次的延时器
var timer = null;
var delay = delay || 200;
return function() {
var args = arguments;
var that = this;
// 清除上一次延时器
clearTimeout(timer)
timer = setTimeout(function() {
fn.apply(that,args)
}, delay);
}
}
- 搜索排版代码
<input type="text" placeholder="输入用户名" v-model="userName" v-on:input="userSearch">
- 在组件中的引入
import {debounce} from '防抖文件的路径'
- 防抖搜索功能
//使用防抖函数
uaerSearch:debounce(function(){
this.getUserName()
},300),
//搜索用户
getUserName(){
this.$axios.get('接口',this.userName).then(res=>{})
}