最近在做实时搜索功能时,被要求使用防抖函数,就自己手写一个,已用于大型项目中

<template><el-input placeholder="请搜索关键字" @input="inputHandle" v-model="input4"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
</template>
export default{data(){timeId: undefined,isLoading: false,input4: ''},methods:{inputHandle(val){this.input4 = val/*以下为防抖代码*/if (!this.timeId && !this.isLoading) {this.guidanceTailList()}if (this.timeId) {clearTimeout(this.timeId)}this.timeId = setTimeout(() => {this.timeId = undefinedclearTimeout(this.timeId)this.guidanceTailList()}, 2500)/*以上为防抖代码*/},guidanceTailList(){this.isLoading=true......省略ajax请求...this.isLoading=false}}
}

总结–:自己平常没事的时候就会看看基础API,巩固一下基础,这样,在封装公共组件或者公共方法时,就不会手忙脚乱,毫无头绪了! 现在的努力,总会在将来的某个不经意的时间收到回报的,加油!

vue 实时搜索 防抖功能相关推荐

  1. 基于Vue实现关键词实时搜索高亮显示关键词

    最近在做移动real-time-search于实时搜索和关键词高亮显示的功能,通过博客的方式总结一下,同时希望能够帮助到别人~~~ 如果不喜欢看文字的朋友我写了一个demo方便已经上传到了github ...

  2. vue使用防抖节流(提交表单、实时搜索)

    1.封装防抖节流方法 deTh.js /*** 闭包函数* * 防抖:对于短时间内连续触发的事件(滚动事件.表单重复提交.页面resize事件,常见于需要做页面适配的时候),让某个时间期限内,事件处理 ...

  3. vue中实现input实时搜索

    实现效果 html <el-input v-model="listQuery.tQuery" @input="searchEvent" clearable ...

  4. 在H5中使用腾讯地图,实现定位,距离计算,实时搜索,地址逆解析

    在H5中使用腾讯地图,实现定位,距离计算,实时搜索,地址逆解析 1.创建应用 2.下载微信sdk包 3.安装`vue-jsonp` 4.使用 获取当前位置信息,逆解析地址 路线规划,距离计算 实时搜索 ...

  5. 输入防抖 vue # 输入搜索的时候 及时搜索的快速访问接口的 解决方案 vue 中使用防抖和节流

    输入防抖 vue # 输入搜索的时候 及时搜索的快速访问接口的 解决方案 vue 中使用防抖和节流 参考文章: (1)输入防抖 vue # 输入搜索的时候 及时搜索的快速访问接口的 解决方案 vue ...

  6. lucene4.5近实时搜索

    近实时搜索就是他能打开一个IndexWriter快速搜索索引变更的内容,而不必关闭writer,或者向writer提交,这个功能是在2.9版本以后引入的,在以前没有这个功能时,必须调用writer的c ...

  7. es mysql延迟_ES 近实时搜索 更新延迟问题

    一.问题发现 有段代码更新 ES中的数据状态,将未读置成已读.是查一批,更新一批,再查再更新. public Boolean updateDealStatus(WarningQuery warning ...

  8. 剖析Elasticsearch集群系列第三篇 近实时搜索、深层分页问题和搜索相关性权衡之道...

    http://www.infoq.com/cn/articles/anatomy-of-an-elasticsearch-cluster-part03?utm_source=infoq&utm ...

  9. vue项目搜索历史功能的实现

    vue项目搜索历史功能的实现 播放器项目中歌曲搜素页面的 首先需要在state定义搜索历史,在其中保存搜索历史 state.js:<br>// 搜索历史: searchHistory: [ ...

  10. vue中搜索关键词,使文本标红

    UserHead.vue中搜索框: <!-- 搜索 --><el-col :span="6" :offset="8" class=" ...

最新文章

  1. c++驱动键鼠源码,C++ 驱动打印机源码
  2. 带电插拔损坏设备原理_热水器不用时,要不要拔插座?看完才知道,天天拔比不拔更危险...
  3. python实现排列组合公式算法_朴素贝叶斯算法的Python实现
  4. 蓝桥杯 第七届 JAVA B组 凑算式
  5. dw写出来的php乱码,解决DW中的乱码问题
  6. 80c51汇编语言指令格式中的非必须,求单片机答案
  7. 教老年人计算机心得体会,老年人教育工作心得体会
  8. python 写配置文件,python配置文件写入过程详解
  9. 第三课:java开发hdfs
  10. hasLayout与Block Formatting Context(块格式化上下文)
  11. java armeabi_armeabi和armeabi-v7a 解释
  12. 数字版权管理 (DRM) 续
  13. 概率论笔记(四)概率分布的下期望和方差的公式总结
  14. Day41——Dp专题
  15. 【能效管理】电力监控系统在某商业数据中心的应用分析
  16. iOS简历这样写,才能找到好工作
  17. 人工智能创新研究报告
  18. 2020 - 2021 年 Web 前端最新导航
  19. 高压开关柜中变送器和传感器有什么不同怎么区分
  20. Hadoop web端打开hdfs上的文件问题

热门文章

  1. C++引用---纯属娱乐
  2. 清北学堂集训day1
  3. java中|和||的使用和区别
  4. 2022-2028年中国生物质颗粒行业市场行情动态及竞争战略分析报告
  5. RabbitMQ(一) | MQ技术对比,以及对RabbitMQ五种消息模型的使用
  6. 获取当前系统时间(取相对于系统时间的前一周时间)
  7. 服务器端查看图片库 eog display Xforwarding
  8. 计算机网络的软件系统包括哪几部分,系统软件由哪几部分组成?
  9. 上海哪里打印比较便宜?
  10. 什么是python解释器?有什么作用?