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 相关文章推荐
ext form 表单提交数据的方法小结
Aug 08 Javascript
根据表格中的某一列进行排序的javascript代码
Nov 29 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
Jun 24 Javascript
json格式数据的添加,删除及排序方法
Jan 21 Javascript
JS实现的简单图片切换功能示例【测试可用】
Feb 14 Javascript
js, jQuery实现全选、反选功能
Mar 08 Javascript
jQuery实现html双向绑定功能示例
Oct 09 jQuery
关闭Vue计算属性自带的缓存功能方法
Mar 02 Javascript
详解node.js的http模块实例演示
Jul 12 Javascript
Vue实现移动端左右滑动效果的方法
Nov 27 Javascript
javascript网页随机点名实现过程解析
Oct 15 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
Jul 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
Windows下PHP5和Apache的安装与配置
2006/09/05 PHP
Zend Guard一些常见问题解答
2008/09/11 PHP
PHP二维数组矩形转置实例
2016/07/20 PHP
PHP中include()与require()的区别说明
2017/02/14 PHP
PHP将整数数字转换为罗马数字实例分享
2019/03/17 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
免费空间广告万能消除代码
2006/09/04 Javascript
prototype Element学习笔记(篇一)
2008/10/26 Javascript
JSON 数据格式介绍
2012/01/13 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
2014/01/14 Javascript
jQuery插件boxScroll实现图片轮播特效
2015/07/14 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
深入研究React中setState源码
2017/11/17 Javascript
微信小程序实现换肤功能
2018/03/14 Javascript
js实现购物车功能
2018/06/12 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
2020/09/09 Javascript
解决vue init webpack 下载依赖卡住不动的问题
2020/11/09 Javascript
[54:28]EG vs OG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python实现FTP服务器服务的方法
2017/04/11 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
详解将Pandas中的DataFrame类型转换成Numpy中array类型的三种方法
2019/07/06 Python
Django Celery异步任务队列的实现
2019/07/24 Python
Python模块相关知识点小结
2020/03/09 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
Bogner美国官网:滑雪服中的”Dior”
2018/01/30 全球购物
冰淇淋店创业计划书范文
2013/12/27 职场文书
先进个人事迹材料
2014/01/25 职场文书
促销活动总结报告
2014/04/26 职场文书
我的理想演讲稿
2014/04/30 职场文书
高等教育学专业自荐书
2014/06/17 职场文书
科级干部群众路线教育实践活动对照检查材料思想汇报
2014/09/20 职场文书
2015年扶贫帮困工作总结
2015/05/20 职场文书
导游词之千岛湖
2019/09/23 职场文书
Python机器学习之决策树和随机森林
2021/07/15 Javascript