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 相关文章推荐
js限制文本框输入长度两种限制方式(长度、字节数)
Dec 19 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
Apr 09 Javascript
jQuery队列操作方法实例
Jun 11 Javascript
Javascript 实现复制(Copy)动作方法大全
Jun 20 Javascript
详解微信小程序 页面跳转 传递参数
Dec 08 Javascript
JS获得一个对象的所有属性和方法实例
Feb 21 Javascript
图解Javascript——作用域、作用域链、闭包
Mar 21 Javascript
理解Angular的providers给Http添加默认headers
Jul 04 Javascript
BootStrap模态框闪退问题实例代码详解
Dec 10 Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 Javascript
vue实现购物车结算功能
Jun 18 Javascript
Vue 修改网站图标的方法
Dec 31 Vue.js
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/03/11 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
php实现用户在线时间统计详解
2011/10/08 PHP
php和javascript之间变量的传递实现代码
2012/12/19 PHP
ThinkPHP应用模式扩展详解
2014/07/16 PHP
php PDO实现的事务回滚示例
2017/03/23 PHP
javascript multibox 全选
2009/03/22 Javascript
关于JavaScript中的关联数组分析
2013/04/09 Javascript
angularjs中的单元测试实例
2014/12/06 Javascript
javascript实现时间格式输出FormatDate函数
2015/01/13 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
js的各种排序算法实现(总结)
2016/07/23 Javascript
jQuery居中元素scrollleft计算方法示例
2017/01/16 Javascript
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
Vue2 配置 Axios api 接口调用文件的方法
2017/11/13 Javascript
实例教学如何写vue插件
2017/11/30 Javascript
ES6 Promise对象的含义和基本用法分析
2019/06/14 Javascript
Python实现简单HTML表格解析的方法
2015/06/15 Python
深入讲解Java编程中类的生命周期
2016/02/05 Python
一张图带我们入门Python基础教程
2017/02/05 Python
python简单线程和协程学习心得(分享)
2017/06/14 Python
python控制windows剪贴板,向剪贴板中写入图片的实例
2018/05/31 Python
基于python 微信小程序之获取已存在模板消息列表
2019/08/05 Python
Python3如何使用tabulate打印数据
2020/09/25 Python
手机端用rem+scss做适配的详解
2017/11/15 HTML / CSS
法国体育用品商店:GO Sport
2019/10/23 全球购物
一道Delphi上机题
2012/06/04 面试题
大学军训感言600字
2014/02/25 职场文书
村抢险救灾方案
2014/05/09 职场文书
公司应聘求职信
2014/06/21 职场文书
2015年教师党员公开承诺书
2015/01/22 职场文书
2016年春节慰问信息
2015/03/25 职场文书
护士自荐信范文
2015/03/25 职场文书
投诉书格式范本
2015/07/02 职场文书
Python基础学习之奇异的GUI对话框
2021/05/27 Python