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 相关文章推荐
aspx中利用js实现确认删除代码
Jul 22 Javascript
JQuery中$之选择器用法介绍
Apr 05 Javascript
jQuery实现高亮显示的方法
Mar 10 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
js模仿php中strtotime()与date()函数实现方法
Aug 11 Javascript
jquery过滤特殊字符',防sql注入的实现方法
Aug 17 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
Dec 17 Javascript
Vue 短信验证码组件开发详解
Feb 14 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
May 23 Javascript
MVVM 双向绑定的实现代码
Jun 21 Javascript
一起写一个即插即用的Vue Loading插件实现
Oct 31 Javascript
JS实现判断移动端PC端功能
Feb 21 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 session劫持和防范的方法
2013/11/12 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
Yii框架实现记录日志到自定义文件的方法
2017/05/23 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
JS 如何获取radio选中后的值及不选择取radio的值
2013/10/28 Javascript
Javascript访问器属性实例分析
2014/12/30 Javascript
如何用JavaScript实现动态修改CSS样式表
2016/05/20 Javascript
jquery 中toggle的2种用法详解(推荐)
2016/09/02 Javascript
最全面的JS倒计时代码
2016/09/17 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
2016/09/30 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
简述JS浏览器的三种弹窗
2018/07/15 Javascript
Vue指令指令大全
2019/02/09 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
2019/06/06 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
2020/04/10 Javascript
el-form 多层级表单的实现示例
2020/09/10 Javascript
JavaScript中如何调用Java方法
2020/09/16 Javascript
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
python使用Flask框架获取用户IP地址的方法
2015/03/21 Python
Python中设置变量作为默认值时容易遇到的错误
2015/04/03 Python
用Python遍历C盘dll文件的方法
2015/05/06 Python
Python实现的多叉树寻找最短路径算法示例
2018/07/30 Python
Python实现按逗号分隔列表的方法
2018/10/23 Python
python版飞机大战代码分享
2018/11/20 Python
解决python明明pip安装成功却找不到包的问题
2019/08/28 Python
纯CSS3实现滚动的齿轮动画效果
2014/06/05 HTML / CSS
野兽派官方旗舰店:THE BEAST 野兽派
2016/08/05 全球购物
司机职责范本
2014/03/08 职场文书
创意婚礼策划方案
2014/05/18 职场文书
锦旗标语大全
2014/06/23 职场文书
群众路线教育实践活动对照检查材料
2014/09/22 职场文书
2014年大学生职业规划书:未来不是梦,只要勇敢冲!
2014/09/22 职场文书
教代会开幕词
2015/01/28 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书
Python Pandas 删除列操作
2022/03/16 Python