js函数防抖和节流

js函数防抖和节流

函数防抖（debounce）

触发事件在 n 秒内只会执行一次函数，如果在 n 秒内又触发了事件，则会重新计算函数执行时间
作用就是限制触发任务（接口调用）的频率，一般用于关键字搜索，表单验证

demo：

handleSearch: function () {
  //固定时间内，没有触发特定条件(输入框字符变化)，那么触发一次任务（接口调用）
  //触发时，销毁之前的定时任务
  clearTimeout(this.timer)
  //创建一个定时任务
  this.timer = setTimeout(async () => {
  	//执行搜索关键字
  	axios.get('https://me.csdn.net/weixin_45426836', {
	    params: {
	      query: this.keyword
	    }
	}).then(function (data) {
	     console.log(data)
	     this.list = data
	}).catch(function (err) {
	     console.log(err)
	})
  }, 1000)
}

函数节流（throttle）

连续触发事件在一定时间内只会执行一次函数，作用就是限制触发任务（接口调用）的频率，一般用于页面触底加载更多

demo：

onReachBottom: function () {
  //判断当前任务是否结束
  if (this.isLoading) {
  	//当前任务正在进行，终止后续代码执行（禁止连续发送请求）
    return
  }
  //断开开关，当前任务正在进行
  this.isLoading = true
  //加载更多，页数增加
  this.pageNum = this.pageNum + 1
  //获取下一页数据
  loadData: function () {
  	axios.get('https://me.csdn.net/weixin_45426836', {
	    params: {
	      pageNum: this.pageNum 
	    }
	}).then(function (data) {
	     console.log(data)
	     this.list.push(...data)
	     //当前任务结束之后打开开关（允许再次发送请求）
	     this.isLoading = false
	}).catch(function (err) {
	     console.log(err)
	})
  }
}

js函数防抖和节流对比：

相同点：

函数防抖与函数节流的作用都是限制触发任务（接口调用）的频率

不同点：

• 函数防抖有可能在很长时间内一次任务都不执行，只有最后一次延时时间达到之后执行一次
• 函数节流在一定时间内会固定触发一次任务，并且是规律的