vue watch监听验证码时,axios延迟发送post请求。
标题写的全面一些,方便其他人检索,我就是找了半天找不到资料,最后自己搞定了。
原理:
每次监听到输入值变化,就打一个时间戳,然后暂停2秒再去提交post验证。
但是每次提交前,判断一下之前打的时间戳和现在时间是否大于2秒,如果大于,则真去提交post,否则return掉不执行。
以下是代码片段:
data () {
return {
captchaInputLastTime:null,
}
watch: {
// 监听验证码变化
'formData.captcha': async function(newVal){
var delay = 2000;//延迟2000 毫秒执行
this.captchaInputLastTime = (new Date()).valueOf();
await this.$root.sleep(delay);
var nowTime = (new Date()).valueOf();
var gap = nowTime - this.captchaInputLastTime;
if( gap < delay){
return
}
axios.post。。。。。执行验证逻辑。
}
methods: {
sleep (ms = 1000) {
return new Promise((resolve)=>setTimeout(resolve,ms));
},
}
vue watch监听验证码时,axios延迟发送post请求。的更多相关文章
- Vue 事件监听实现导航栏吸顶效果(页面滚动后定位)
Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...
- 设计模式(5): vue 不监听绑定的变量
概述 最近最近做项目的时候总会思考一些大的应用设计模式相关的问题,我把自己的思考记录下来,供以后开发时参考,相信对其他人也有用. 绑定变量 一般情况下,如果我们需要在组件中使用某个变量,会这么使用: ...
- vue watch监听不到对象,探究 watch 原理
最近使用vue watch时,在某些模块监听不到对象的改变,无法触发回调函数. 解决: 使用watch监听对象时,只能监听到该对象初始化时已存在的key值. 如下例监听user对象,在初始化时没有ag ...
- vue时时监听input输入框中 输入内容 写法
Vue input 监听 使用 v-on:input="change" 实现即可 App.vue <template> <div> <md-field ...
- 详解Vue 如何监听Array的变化
详解Vue 如何监听Array的变化:https://www.jb51.net/article/162584.htm
- 9.Vue.js 监听属性
本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化. 以下实例通过使用 watch 实现计数器: <div id = "app&q ...
- 05: 使用axios/vue-resource发送HTTP请求
1.1 axios 简介与安装 1.axios简介 1. vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 2. axios是一个基于Promise的HTTP请 ...
- vue.js 监听属性的学习/ 千米、米的转换 /时、分、秒 的转换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- vue+hbuilder监听安卓返回键问题
1.监听安卓返回键问题 效果:在一级页面按一下返回键提示退出应用,按两下退出应用;在其它页面中,按一下返回上个历史页面 1 2 import mui from './assets/js/mui.min ...
随机推荐
- HTML入门知识汇总
1. HTML认识 1.1 什么是HTML HTML是描述(制作)网页的语言,指的是超文本标记语言(Hyper Text Markup Language). 超文本:就是指页面内可以包含图片.链接.甚 ...
- GIS之家小专栏
专栏简介:WebGIS开发者@GIS之家,一直混迹GIS行业,关注WebGIS开发方向,在本专栏中,分享WebGIS入门开发系列技术文章 核心内容: arcgis api 3.x for js开发系列 ...
- Android ADB命令详解
adb的全称为Android Debug Bridge.是android司机经常用到的工具 . 你能在本篇文章中学到什么? adb基本指令 Shell AM&PM adb模拟用户事件 logc ...
- RationalRose 安装过程中无法加载镜像的问题
前情提要:本文主要以提供关键问题的解决思路为目的,境况紧急的,在核对好所遇问题与博主是否一致后,可以直接跳到最后看解决办法即可. 另外,本文重要部分采用不同色文字,加以强调. 任务:安装Rationa ...
- EasyToLearnDesignPattern
简单上手设计模式 GITHUB:https://github.com/Fisher-Joe/EasyToLearnDesignPattern 本文旨在使用最简单的语言,最简单的代码让人学习设计模式(最 ...
- OutOfMemoryError/OOM/内存溢出异常实例分析--堆内存溢出
Java堆内存溢出 只要不断创建对象,并且保证GC Roots到对象之间有可达路径来避免垃圾回收机制清除这些对象, 那么在对象数量到达最大堆的容量限制后就会产生内存溢出异常,代码如下: import ...
- 【English Teradata】Strategizing Vantage Technology
strategy部署;谋略;战略[ˈstrætədʒi] strategize制定战略 Strategizing战略化 Technology科技;工艺;工程技术 [tekˈnɑːlədʒi] St ...
- The Network Adapter could not establish the connection
启动即可
- ASP.NET Core 共享第三方依赖库部署的正常打开方式
曾经: 写了一篇: ASP.Net Core on Linux (CentOS7) 共享第三方依赖库部署 当第二次想做相同的事,却遇上了Bug,于是有了第二篇: ASP.NET Core 共享第三方依 ...
- JavaScript第一回-来龙去脉
简写:JavaScript-JS ECMAScript-ES 写在前面的话:啃文字大多时间不是件愉快的事情,但是我们必须过这个坎,让自己习惯,让自己不讨厌,至于喜欢不喜欢,我们等时间给出答案. J ...