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 相关文章推荐
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
Jan 11 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
Jan 15 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
修改jquery中dialog的title属性方法(推荐)
Aug 26 Javascript
js改变透明度实现轮播图的算法
Aug 24 Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 Javascript
webpack热模块替换(HMR)/热更新的方法
Apr 05 Javascript
vuejs router history 配置到iis的方法
Sep 20 Javascript
Vue.js的复用组件开发流程完整记录
Nov 29 Javascript
Node.js API详解之 assert模块用法实例分析
May 26 Javascript
原生js实现弹幕效果
Nov 29 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生成随机密码类分享
2014/06/25 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
浅谈php的优缺点
2015/07/14 PHP
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
2013/04/15 Javascript
JS数组的遍历方式for循环与for...in
2014/07/31 Javascript
node.js中的path.dirname方法使用说明
2014/12/09 Javascript
深入浅析JavaScript中prototype和proto的关系
2015/11/15 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
有关文件上传 非ajax提交 得到后台数据问题
2016/10/12 Javascript
canvas绘制万花筒效果(代码分享)
2017/01/20 Javascript
js上传图片预览的实现方法
2017/05/09 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
vue实现图片加载完成前的loading组件方法
2018/02/05 Javascript
jQuery实现的简单获取索引功能示例
2018/06/04 jQuery
vue 解决路由只变化参数页面组件不更新问题
2019/11/05 Javascript
详解vue中v-on事件监听指令的基本用法
2020/07/22 Javascript
[08:47]DOTA2每周TOP10 精彩击杀集锦vol.6
2014/06/25 DOTA
[37:50]VP vs TNC Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
介绍Python中的__future__模块
2015/04/27 Python
Python时间模块datetime、time、calendar的使用方法
2016/01/13 Python
python用pickle模块实现“增删改查”的简易功能
2017/06/07 Python
Python简单删除列表中相同元素的方法示例
2017/06/12 Python
python的json中方法及jsonpath模块用法分析
2019/12/06 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
大学生职业生涯规划范文
2014/01/22 职场文书
护士自我评价范文
2014/01/25 职场文书
品德评语大全
2014/05/05 职场文书
施工安全汇报材料
2014/08/17 职场文书
人事代理委托书
2014/09/27 职场文书
法律意见书范文
2015/06/04 职场文书
ORACLE查看当前账号的相关信息
2021/06/18 Oracle
Go 中的空白标识符下划线
2022/03/25 Golang
Python经常使用的一些内置函数
2022/04/11 Python