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 相关文章推荐
Code:loadScript( )加载js的功能函数
Feb 02 Javascript
Javascript中的数学函数
Apr 04 Javascript
jquery 图片上传按比例预览插件集合
May 28 Javascript
JavaScript对象数组的排序处理方法
Oct 21 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
原生JavaScript实现AJAX、JSONP
Feb 07 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
May 10 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
Nov 24 Javascript
cocos2dx+lua实现橡皮擦功能
Dec 20 Javascript
微信小程序发布新版本时自动提示用户更新的方法
Jun 07 Javascript
基于javascript实现碰撞检测
Mar 12 Javascript
使用原生JS实现滚轮翻页效果的示例代码
May 31 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生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
php判断文件夹是否存在不存在则创建
2015/04/09 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
ThinkPHP5.0框架实现切换数据库的方法分析
2019/10/30 PHP
js AspxButton的客户端操作
2009/06/26 Javascript
JavaScript读取中文cookie时的乱码问题的解决方法
2009/10/14 Javascript
jQuery-Tools-overlay 使用介绍
2012/07/14 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
在HTML代码中使用JavaScript代码的例子
2014/10/16 Javascript
jquery中EasyUI实现同步树
2015/03/01 Javascript
js获取当前日期时间及其它操作汇总
2015/04/17 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
使用DataTable插件实现异步加载数据
2017/11/19 Javascript
jQuery实现简单的下拉菜单导航功能示例
2017/12/07 jQuery
vue-cli打包后本地运行dist文件中的index.html操作
2020/08/12 Javascript
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
使用httplib模块来制作Python下HTTP客户端的方法
2015/06/19 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
python的debug实用工具 pdb详解
2019/07/12 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
Python+MySQL随机试卷及答案生成程序的示例代码
2021/02/01 Python
澳大利亚潮流尖端的快时尚品牌:Cotton On
2016/09/26 全球购物
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
商务专员岗位职责
2013/11/23 职场文书
制药工程专业毕业生推荐信
2013/12/24 职场文书
公务员政审个人鉴定
2014/02/25 职场文书
能源工程专业应届生求职信
2014/03/01 职场文书
公务员检讨书
2014/11/01 职场文书
2015年数学教师工作总结
2015/05/20 职场文书
MySQL获取所有分类的前N条记录
2021/05/07 MySQL
php+laravel 扫码二维码签到功能
2021/05/15 PHP
Matlab如何实现矩阵复制扩充
2021/06/02 Python