vue输入节流,避免实时请求接口的实例代码


Posted in Javascript onOctober 30, 2019

在做搜索的时候,当搜索页面只有一个输入框、没有确定按钮的时候,只能在用户输入时请求服务端,查询数据。这样会导致频繁的发送请求,造成服务端压力。

解决这个问题,可以使用vue做输入节流。

1、创建一个工具类,debounce.js

/***
 * @param func 输入完成的回调函数
 * @param delay 延迟时间
 */
export function debounce(func, delay) {
 let timer
 return (...args) => {
  if (timer) {
   clearTimeout(timer)
  }
  timer = setTimeout(() => {
   func.apply(this, args)
  }, delay)
 }
}

2、在搜索页面使用

<template>
 <div class="xn-container">
  <input type="text" class="text-input" v-model="search">
 </div>
</template>

<script>
 import {debounce} from '../utils/debounce'
 export default {
  name: 'HelloWorld',
  data () {
   return {
    search: ''
   }
  },
  created() {
   this.$watch('search', debounce((newQuery) => {
    // newQuery为输入的值
    console.log(newQuery)
   }, 200))
  }
 }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 .text-input {
  display: block;
  width: 100%;
  height: 44px;
  border: 1px solid #d5d8df;
 }
</style>

以上这篇vue输入节流,避免实时请求接口的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS Array对象入门分析
Oct 30 Javascript
JQuery 学习技巧总结
May 21 Javascript
用js替换除数字与逗号以外的所有字符的代码
Jun 07 Javascript
纯javascript实现四方向文本无缝滚动效果
Jun 16 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
Nov 07 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 Javascript
JavaScript中的原型继承基础学习教程
May 06 Javascript
JavaScript中自带的 reduce()方法使用示例详解
Aug 10 Javascript
原生js实现焦点轮播图效果
Jan 12 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
Jan 02 Javascript
js实现搜索提示框效果
Sep 05 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
Dec 16 Javascript
vue 解决form表单提交但不跳转页面的问题
Oct 30 #Javascript
解决在Vue中使用axios用form表单出现的问题
Oct 30 #Javascript
vue路由 遍历生成复数router-link的例子
Oct 30 #Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
Oct 30 #Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 #Javascript
微信小程序基于高德地图查找位置并显示文字
Oct 30 #Javascript
vue 实现cli3.0中使用proxy进行代理转发
Oct 30 #Javascript
You might like
PHP 数字左侧自动补0
2008/03/31 PHP
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
PHP使用正则表达式清除超链接文本
2013/11/12 PHP
php无限极分类递归排序实现方法
2014/11/11 PHP
基于PHP给大家讲解防刷票的一些技巧
2015/11/18 PHP
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
JQ技术实现注册页面带有校验密码强度
2015/07/27 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
2016/02/17 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
2016/11/03 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
Vue.js 单页面多路由区域操作的实例详解
2017/07/17 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
通过 JS 判断页面是否有滚动条的实现方法
2018/04/05 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
2018/05/23 Javascript
在Vue环境下利用worker运行interval计时器的步骤
2019/08/01 Javascript
vue使用i18n实现国际化的方法详解
2019/09/05 Javascript
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
Python与Java间Socket通信实例代码
2017/03/06 Python
Python基于回溯法子集树模板解决取物搭配问题实例
2017/09/02 Python
Python基于xlrd模块操作Excel的方法示例
2018/06/21 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
django Serializer序列化使用方法详解
2018/10/16 Python
Python多线程threading模块用法实例分析
2019/05/22 Python
python将图片转base64,实现前端显示
2020/01/09 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
会计实习期自我鉴定
2013/10/06 职场文书
校园安全广播稿
2014/02/08 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
商品陈列协议书
2014/09/29 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
2014年服装销售工作总结
2014/11/27 职场文书
趣味运动会新闻稿
2015/07/17 职场文书
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android