脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue input输入框防抖debounce函数使用

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的index.html中获取环境变量和业务判断图文详解

    vue的index.html中获取环境变量和业务判断图文详解

    这篇文章主要给大家介绍了关于vue的index.html中获取环境变量和业务判断的相关资料,对vue来说index.html是一个总的入口文件,vue是单页面应用,挂在id为app的div下然后动态渲染路由模板,需要的朋友可以参考下
    2023-09-09
  • Vue状态管理工具Pinia的安装与使用教程

    Vue状态管理工具Pinia的安装与使用教程

    这篇文章主要介绍了Vue状态管理工具Pinia的安装与使用,一步一步学习如何将pinia运用到项目实战中去,文中有详细的安装教程和使用方法,并通过代码示例讲解的非常详细,需要的朋友可以参考下
    2024-03-03
  • vue中$emit传递多个参(arguments和$event)

    vue中$emit传递多个参(arguments和$event)

    本文主要介绍了vue中$emit传递多个参(arguments和$event)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • Vue中加载天地图的离线地图基本步骤

    Vue中加载天地图的离线地图基本步骤

    这篇文章主要给大家介绍了关于Vue中加载天地图的离线地图的基本步骤,Vue天地图离线地图是指基于Vue框架开发的应用程序,使用天地图离线地图服务提供商提供的地图数据,可以在没有网络的情况下使用地图功能,需要的朋友可以参考下
    2023-10-10
  • vue文件树组件使用详解

    vue文件树组件使用详解

    这篇文章主要为大家详细介绍了vue文件树组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-03-03
  • VSCode中写Vue没有代码提示的解决步骤(附图文)

    VSCode中写Vue没有代码提示的解决步骤(附图文)

    这篇文章主要给大家介绍了关于VSCode中写Vue没有代码提示的解决步骤,代码提示功能能够大大的提高开发效率,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-09-09
  • Vue可自定义tab组件用法实例

    Vue可自定义tab组件用法实例

    在本篇文章里小编给大家分享了关于Vue可自定义tab组件用法实例以及相关知识点，需要的朋友们参考下。
    2019-10-10
  • Vue.js：使用Vue-Router 2实现路由功能介绍

    Vue.js：使用Vue-Router 2实现路由功能介绍

    本篇文章主要介绍了Vue.js：使用Vue-Router 2实现路由功能介绍，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • Vue路由组件的缓存keep-alive和include属性的具体使用

    Vue路由组件的缓存keep-alive和include属性的具体使用

    ：浏览器页面在进行切换时,原有的路由组件会被销毁,通过缓存可以保存被切换的路由组件,本文主要介绍了Vue路由组件的缓存keep-alive和include属性的具体使用,感兴趣的可以了解一下
    2023-11-11
  • Vue自定义CSS变量的使用方法

    Vue自定义CSS变量的使用方法

    随着前端技术的发展,CSS 变量（也称为 CSS 定制属性）成为了现代 Web 开发中不可或缺的一部分,在 Vue.js 应用程序中,使用 CSS 变量不仅可以增强样式的灵活性,还能提高开发效率,本文将详细介绍如何在 Vue 项目中引入并使用 CSS 变量,需要的朋友可以参考下
    2024-09-09

最新评论