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 仿QQ滑动菜单效果代码
Sep 03 Javascript
jquery获取焦点和失去焦点事件代码
Apr 21 Javascript
jqgrid 编辑添加功能详细解析
Nov 08 Javascript
JavaScript 七大技巧(二)
Dec 13 Javascript
基于 Node.js 实现前后端分离
Apr 23 Javascript
使用bootstrap实现多窗口和拖动效果
Sep 22 Javascript
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 Javascript
小程序实现展开/收起的效果示例
Sep 22 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
Mar 04 Javascript
vue实现Input输入框模糊查询方法
Jan 29 Javascript
Vue中使用import进行路由懒加载的原理分析
Apr 01 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
编写Smarty插件在模板中直接加载数据的详细介绍
2013/06/26 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
PHP实现Soap通讯的方法
2014/11/03 PHP
PHP使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
php读取csc文件并输出
2015/05/21 PHP
PHP中对数组的一些常用的增、删、插操作函数总结
2015/11/27 PHP
PHP判断数组是否为空的常用方法(五种方法)
2017/02/08 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
Javascript 通过json自动生成Dom的代码
2010/04/01 Javascript
Jquery知识点三 jquery表单对象操作
2011/01/17 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
2016/06/29 Javascript
基于jQuery实现的单行公告活动轮播效果
2017/08/23 jQuery
收集前端面试题之url、href、src
2018/03/22 Javascript
jQuery中图片展示插件highslide.js的简单dom
2018/04/22 jQuery
微信小程序实现的一键复制功能示例
2019/04/24 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
2020/06/08 Javascript
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
python爱心表白 每天都是浪漫七夕!
2018/08/18 Python
django基础学习之send_mail功能
2019/08/07 Python
python根据多个文件名批量查找文件
2019/08/13 Python
Html5原生拖拽相关事件简介以及基础实现
2020/11/19 HTML / CSS
美国电视购物HSN官网:HSN
2016/09/07 全球购物
Gap中国官网:美式休闲风服饰
2017/02/05 全球购物
白色公司:The White Company
2017/10/11 全球购物
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
捷克母婴用品购物网站:Feedo.cz
2020/12/28 全球购物
Ajax的工作原理
2015/12/04 面试题
财务会计自荐信范文
2014/02/21 职场文书
《雪儿》教学反思
2014/04/17 职场文书
2014第二批党的群众路线教育实践活动对照检查材料思想汇报
2014/09/18 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
三行辞职书范文
2015/02/26 职场文书
python实现socket简单通信的示例代码
2021/04/13 Python
Python Flask实现进度条
2022/05/11 Python
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS