vue之input输入框防抖debounce函数的使用方式

 更新时间:2023年11月17日 10:59:32   作者:如果会御剑  
这篇文章主要介绍了vue之input输入框防抖debounce函数的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

方法一

这种方式很简单,但是能实现一样的功能。

<template>
    <div>
        <input class="inputBox" type="text" placeholder="搜索项目名称" v-model="searchValue" @keyup.enter="searchBtn" @input="searchBtn">
    </div>
</template>
<script>
let timers = null;
export default{
 data(){
  return{
    searchValue:''
  }
 }
methods:{
 searchBtn(){
  clearTimeout(timers)
  timers = setTimeout(() => {
   this.getOfferList()//需要防抖的函数
  }, 500);
 },
 }
}
</script>

方法二

这个方法是vue官网上的做法。

计算属性和侦听器 — Vue.js

<template>
    <div>
        <input class="inputBox" type="text" placeholder="搜索项目名称" v-model="searchValue">
    </div>
<template>
<script>
export default{
 data(){
  return{
    searchValue:''
  }
 }
//监听input输入值变化
watch:{
  searchValue:function(){
    this.debouncedGetAnswer();
  }
},
created(){
  this.debouncedGetAnswer = this.debounce(this.getOfferList, 500);
  //this.getOfferList是你查询数据的函数,也就是需要防抖的函数
},
methods:{
//防抖
 debounce(fn, delay = 500){
      let timer = null;
      return function() {
        if (timer) {
          clearTimeout(timer)
        }
        timer = setTimeout(() => {
          fn.apply(this, arguments)
          timer = null
        }, delay)
      }
    }
}
</script>

方法三

1.封装一个模块,引入即可,在utils新建一个js文件,名称随便

<template>
    <div>
        <input class="inputBox" type="text" placeholder="搜索项目名称" v-model="searchValue">
    </div>
<template>
<script>
export default{
 data(){
  return{
    searchValue:''
  }
 }
//监听input输入值变化
watch:{
  searchValue:function(){
    this.debouncedGetAnswer();
  }
},
created(){
  this.debouncedGetAnswer = this.debounce(this.getOfferList, 500);
  //this.getOfferList是你查询数据的函数,也就是需要防抖的函数
},
methods:{
//防抖
 debounce(fn, delay = 500){
      let timer = null;
      return function() {
        if (timer) {
          clearTimeout(timer)
        }
        timer = setTimeout(() => {
          fn.apply(this, arguments)
          timer = null
        }, delay)
      }
    }
}
</script>

2.在需要的vue文件引入即可使用

import { _throttle, _debounce } from '@/utils/throttle'

3.在vue文件的使用方法

// 监听搜索框内容的变化,等输入完成才会执行搜索函数=>即防抖
watch: {
    searchValue: _debounce(function() {
      this.page = 1
      this.getJobFairList()
    })
  },
 
 
// 搜索,短时间内连续点击搜索按钮只执行一次搜索函数=>即节流
searchBtn: _throttle(function() {
  if (this.searchValue) {
    this.getJobFairList()
  }
}),

方法三是最近才更新的代码,也是最新的代码,建议使用方法三

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue一步步实现alert功能

    vue一步步实现alert功能

    本篇文章主要介绍了vue一步步实现alert功能,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • VUE入门学习之事件处理

    VUE入门学习之事件处理

    这篇文章主要介绍了vue事件处理原理及过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2021-10-10
  • Vue2.0在IE11版本浏览器中的兼容性问题

    Vue2.0在IE11版本浏览器中的兼容性问题

    这篇文章主要介绍了Vue2.0在IE11版本浏览器中的兼容性问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • Vue基于vuex、axios拦截器实现loading效果及axios的安装配置

    Vue基于vuex、axios拦截器实现loading效果及axios的安装配置

    这篇文章主要介绍了Vue基于vuex、axios拦截器实现loading效果及axios的安装配置,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • Vue3 AST解析器-源码解析

    Vue3 AST解析器-源码解析

    这篇文章我们从 ast 生成时调用的 baseParse 函数分析,再到 baseParse 返回 createRoot 的调用结果,一直到细化的讲解了 parseChildren 解析子节点函数中的其中某一个具体解析器的执行过程。最后通过一个简单模板举例,需要的朋友可以参考下
    2021-09-09
  • vue实现pdf文档在线预览功能

    vue实现pdf文档在线预览功能

    这篇文章主要为大家详细介绍了vue实现pdf文档在线预览功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • Vue3中按需引入ECharts详细步骤(一看就会)

    Vue3中按需引入ECharts详细步骤(一看就会)

    新项目采用Vue3作为前端项目框架,避免不了要使用echarts,这篇文章主要给大家介绍了关于Vue3中按需引入ECharts的相关资料,需要的朋友可以参考下
    2023-09-09
  • vue3+ts实现树形组件(菜单组件)

    vue3+ts实现树形组件(菜单组件)

    本文主要介绍了vue3+ts实现树形组件(菜单组件),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • electron + vue项目实现打印小票功能及实现代码

    electron + vue项目实现打印小票功能及实现代码

    这篇文章主要介绍了electron + vue项目实现打印小票功能,需要的朋友可以参考下
    2018-11-11
  • vue2+element-ui+nodejs实现图片上传和修改图片到数据库的方法

    vue2+element-ui+nodejs实现图片上传和修改图片到数据库的方法

    在Web开发中经常需要使用图片,有时候需要对图片进行上传,这篇文章主要给大家介绍了关于vue2+element-ui+nodejs实现图片上传和修改图片到数据库的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-04-04

最新评论