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 相关文章推荐
jQuery 使用手册(三)
Sep 23 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
Mar 05 Javascript
20行代码实现的一个CSS覆盖率测试脚本
Jul 07 Javascript
关于session和cookie的简单理解
Jun 08 Javascript
JS判断form内所有表单是否为空的简单实例
Sep 09 Javascript
浅析JS中对函数function的理解(基础篇)
Oct 14 Javascript
Avalonjs 实现简单购物车功能(实例代码)
Feb 07 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
利用React Router4实现的服务端直出渲染(SSR)
Jan 07 Javascript
微信小程序在text文本实现多种字体样式
Nov 08 Javascript
js实现圆形菜单选择器
Dec 03 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
使用apache模块rewrite_module (转)
2007/02/14 PHP
PHP使用静态方法的几个注意事项
2014/09/16 PHP
封装ThinkPHP的一个文件上传方法实例
2014/10/31 PHP
thinkPHP中create方法与令牌验证实例浅析
2015/12/08 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
js识别uc浏览器的代码
2015/11/06 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
2015/12/02 Javascript
JS实现简单的二维矩阵乘积运算
2016/01/26 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
2016/02/17 Javascript
Bootstrap开关(switch)控件学习笔记分享
2016/05/30 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
vue获取data数据改变前后的值方法
2019/11/07 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
python互斥锁、加锁、同步机制、异步通信知识总结
2018/02/11 Python
在Python 字典中一键对应多个值的实例
2019/02/03 Python
Python中使用threading.Event协调线程的运行详解
2020/05/02 Python
如何一键升级Python所有包
2020/11/05 Python
python Pexpect模块的使用
2020/12/25 Python
HTML5使用Audio标签实现歌词同步的效果
2016/03/17 HTML / CSS
局部内部类是否可以访问非final变量?
2013/04/20 面试题
煤矿班组长岗位职责
2013/12/29 职场文书
简单英文演讲稿
2014/01/01 职场文书
老同学聚会感言
2014/02/23 职场文书
乡镇信息公开实施方案
2014/03/23 职场文书
诚信考试承诺书
2014/03/27 职场文书
本科生求职信
2014/06/17 职场文书
2014年物业管理工作总结
2014/11/21 职场文书
大学生学期个人总结
2015/02/12 职场文书
酒店辞职书怎么写
2015/02/26 职场文书
2015年保卫科工作总结
2015/05/14 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
关于党风廉政建设宣传教育月的活动总结!
2019/08/08 职场文书
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android
SQL Server数据库基本概念、组成、常用对象与约束
2022/03/20 SQL Server