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 相关文章推荐
初学JavaScript第二章
Sep 30 Javascript
js/jquery去掉空格,回车,换行示例代码
Nov 05 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
Mar 03 Javascript
详解JavaScript的while循环的使用
Jun 03 Javascript
AngularJs解决跨域问题案例详解(简单方法)
May 19 Javascript
JS获得一个对象的所有属性和方法实例
Feb 21 Javascript
AngularJS实现的锚点楼层跳转功能示例
Jan 02 Javascript
webpack引入eslint配置详解
Jan 22 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 Javascript
vue中keep-alive内置组件缓存的实例代码
Apr 16 Javascript
JavaScript中window和document用法详解
Jul 28 Javascript
vue 单页应用和多页应用的优劣
Oct 22 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的无限分类实现想法~
2007/01/02 PHP
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
2009/09/15 Javascript
JQery 渐变图片导航效果代码 漂亮
2010/01/01 Javascript
js不完美解决click和dblclick事件冲突问题
2012/07/16 Javascript
js加载之使用DOM方法动态加载Javascript文件
2013/11/08 Javascript
JavaScript 学习笔记之变量及其作用域
2015/01/14 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
jQuery绑定事件的四种方式介绍
2016/10/31 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
2016/12/17 Javascript
vue.js单页面应用实例的简单实现
2017/04/10 Javascript
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
微信小程序在其他页面监听globalData中值的变化
2019/07/15 Javascript
Vue监听滚动实现锚点定位(双向)示例
2019/11/13 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
2020/09/21 Javascript
python 控制语句
2011/11/03 Python
浅析python中的分片与截断序列
2016/08/09 Python
Python通过future处理并发问题
2017/10/17 Python
python生成带有表格的图片实例
2019/02/03 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
python同步两个文件夹下的内容
2019/08/29 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
浅谈PyTorch中in-place operation的含义
2020/06/27 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
伦敦高达60%折扣的钻石珠宝商:Purely Diamonds
2018/06/24 全球购物
使用索引有什么好处
2016/07/27 面试题
请说出以下代码输出什么
2013/08/30 面试题
个人求职信范文分享
2014/01/31 职场文书
机械设计及其自动化求职推荐信
2014/02/17 职场文书
祖国在我心中演讲稿300字
2014/05/04 职场文书
机关党员公开承诺书
2014/08/30 职场文书
申报材料格式
2014/12/30 职场文书
销售业务员岗位职责
2015/02/13 职场文书
2015年汽车销售经理工作总结
2015/04/27 职场文书
golang slice元素去重操作
2021/04/30 Golang
用Python创建简易网站图文教程
2021/06/11 Python