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 相关文章推荐
WordPress 插件——CoolCode使用方法与下载
Jul 02 Javascript
jquery 图片截取工具jquery.imagecropper.js
Apr 09 Javascript
解析js如何获取当前url中的参数值并复制给input
Jun 23 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
Jul 09 Javascript
JavaScript中的原型prototype属性使用详解
Jun 05 Javascript
JS结合bootstrap实现基本的增删改查功能
Jul 22 Javascript
jQuery解析返回的xml和json方法详解
Jan 05 Javascript
jQuery.cookie.js使用方法及相关参数解释
Mar 06 Javascript
详解Node.js开发中的express-session
May 19 Javascript
JavaScript实现三级联动菜单效果
Aug 16 Javascript
vue如何使用 Slot 分发内容实例详解
Sep 05 Javascript
js根据需要计算数组中重复出现某个元素的个数
Jan 18 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 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
供参考的 php 学习提高路线分享
2011/10/23 PHP
使用php发送有附件的电子邮件-(PHPMailer使用的实例分析)
2013/04/26 PHP
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
PHP数组去重比较快的实现方式
2016/01/19 PHP
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
JavaScript 字符串乘法
2009/08/20 Javascript
密码强度检测效果实现原理与代码
2013/01/04 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
jquery插件开发之实现jquery手风琴功能分享
2014/03/10 Javascript
javascript时间函数大全
2014/06/30 Javascript
JavaScript中模拟实现jsonp
2015/06/19 Javascript
js window对象属性和方法相关资料整理
2015/11/11 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
JS、jQuery中select的用法详解
2016/04/21 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
JavaScript生成指定范围随机数和随机序列的方法
2018/05/05 Javascript
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
深入浅析vue全局环境变量和模式
2020/04/28 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
2020/05/19 jQuery
详解Howler.js Web音频播放终极解决方案
2020/08/23 Javascript
vant组件中 dialog的确认按钮的回调事件操作
2020/11/04 Javascript
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
详解django+django-celery+celery的整合实战
2019/03/19 Python
python实现对输入的密文加密
2019/03/20 Python
解决阿里云邮件发送不能使用25端口问题
2020/08/07 Python
Python中openpyxl实现vlookup函数的实例
2020/10/28 Python
python os.rename实例用法详解
2020/12/06 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
后备干部培训方案
2014/05/22 职场文书
机械专业求职信
2014/05/25 职场文书
工作检讨书怎么写
2015/01/23 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python