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(视频与PPT)
Dec 27 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
Sep 29 Javascript
JS组件Bootstrap Table布局详解
May 27 Javascript
Vue.js 60分钟快速入门教程
Mar 28 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
Jun 20 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
通俗易懂地解释JS中的闭包
Oct 23 Javascript
JS加密插件CryptoJS实现的DES加密示例
Aug 16 Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 Javascript
javascript中的event loop事件循环详解
Dec 14 Javascript
纯js+css实现在线时钟
Aug 18 Javascript
JS算法教程之字符串去重与字符串反转
Dec 15 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&amp;java(三)
2006/10/09 PHP
PHP实现根据数组的值进行分组的方法
2017/04/20 PHP
laravel 中如何使用ajax和vue总结
2017/08/16 PHP
TP3.2框架分页相关实现方法分析
2020/06/03 PHP
获取中文字符串的实际长度代码
2014/06/05 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
js+html5实现canvas绘制简单矩形的方法
2015/06/05 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
2015/09/16 Javascript
jQuery实现的登录浮动框效果代码
2015/09/26 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
2016/01/14 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
JavaScript工具库之Lodash详解
2019/06/15 Javascript
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
Python正则表达式匹配ip地址实例
2014/10/09 Python
Python基于xlrd模块操作Excel的方法示例
2018/06/21 Python
python实现海螺图片的方法示例
2019/05/12 Python
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
python批量处理文件或文件夹
2020/07/28 Python
Python selenium的基本使用方法分析
2019/12/21 Python
基于python实现把json数据转换成Excel表格
2020/05/07 Python
简单的Python人脸识别系统
2020/07/14 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
Subside Sports德国:足球球衣和球迷商品
2019/06/08 全球购物
Sandro法国官网:法国成衣品牌
2019/08/28 全球购物
医药大学生求职简历的自我评价
2013/10/17 职场文书
工作失误检讨书范文大全
2014/01/13 职场文书
相亲大会策划方案
2014/06/05 职场文书
毕业横幅标语
2014/10/08 职场文书
办公室个人总结
2015/02/28 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书
Nginx图片服务器配置之后图片访问404的问题解决
2022/03/21 Servers