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 ... 
随机推荐
- 学习python的第三天
			4.28日总结 一.关于python 1.交互式 说一句解释一句 2.命令行式 1.编写文件并且保存 2.打开python解释器,在pyrhon中打开文本,读入内存(python打开的时候,翻译不是瞬 ... 
- Android8.0通知
			android里面经常会使用Notification来显示通知的消息,一般使用NotificationManager来创建通知消息 NotificationManager manger = (Noti ... 
- mysql 服务【安装】【启动】【停止】【卸载】【重置密码】
			windows安装:一.一机安装多个服务时,重复步骤,修改服务名即可: 1.mysqld install mysql_12336 --defaults-file="MYSQL_HOME\my ... 
- 有关Windows10中诊断和反馈隐私设置
			当你使用 Windows 时,我们将收集诊断信息,为了确保能收到你(我们的客户)的反馈,我们为你提供了多种方式,以便你可以随时发送反馈,也可以在某个特定的时间(例如当 Windows 10 向你提出关 ... 
- 关于OSError: [WinError 10038] 在一个非套接字上尝试了一个操作。
			在使用socket的时候,写了一个while循环,就报错了.结果如下: OSError: [WinError 10038] 在一个非套接字上尝试了一个操作. 代码 import socket impo ... 
- 使用 docker-compose 快速安装Jenkins
			本文分享在 docker 环境中,使用 docker-compose.yml 快速安装 Jenkins,以及使用主机中的 docker 打包推送镜像到阿里云 博客园的第100篇文章达成,2019的第一 ... 
- Dapeng框架-开源高性能分布式微服务框架
			我们公司性质是新零售,公司也有专门的框架组.这群大牛自己开发了一整套分布式微服务框架.我们也在使用这套框架,有很多心得体会. 该框架既Dapeng也!开源github地址:https://github ... 
- Python:如何用一行代码获取上个月是几月
			现在转一篇志军100发于公众号 Python之禅的文章: Python:如何用一行代码获取上个月是几月 抱歉我用了个有点标题党的标题,因为担心你错过了本文,但内容绝对干货,本文介绍的关于Python时 ... 
- .NetCore 使用Cookie
			1.首先我们在Startup下面的ConfigureServices中注册授权认证服务以及AddCookie services.AddAuthentication(CookieAuthenticati ... 
- 微信小程序开发03-这是一个组件
			编写组件 基本结构 接上文:微信小程序开发02-小程序基本介绍 我们今天先来实现这个弹出层: 之前这个组件是一个容器类组件,弹出层可设置载入的html结构,然后再设置各种事件即可,这种组件有一个特点: ... 
