辉太郎看前端(javascript防抖函数)

前言

防抖的目的是为了减少不必要的计算，不浪费资源，只在适合的时候再进行触发计算。

防抖函数

• 定义

在事件被触发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=>{})
}

总结

初出茅庐，请各位大佬多多指教。😘