防抖函数
防抖 的目的是为了减少不必要的计算,不浪费资源,只在适合的时候再进行触发计算。
定义 在事件被触发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=>{})
}
``