标题写的全面一些,方便其他人检索,我就是找了半天找不到资料,最后自己搞定了。

原理:

每次监听到输入值变化,就打一个时间戳,然后暂停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请求。的更多相关文章

  1. Vue 事件监听实现导航栏吸顶效果(页面滚动后定位)

    Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...

  2. 设计模式(5): vue 不监听绑定的变量

    概述 最近最近做项目的时候总会思考一些大的应用设计模式相关的问题,我把自己的思考记录下来,供以后开发时参考,相信对其他人也有用. 绑定变量 一般情况下,如果我们需要在组件中使用某个变量,会这么使用: ...

  3. vue watch监听不到对象,探究 watch 原理

    最近使用vue watch时,在某些模块监听不到对象的改变,无法触发回调函数. 解决: 使用watch监听对象时,只能监听到该对象初始化时已存在的key值. 如下例监听user对象,在初始化时没有ag ...

  4. vue时时监听input输入框中 输入内容 写法

    Vue input 监听 使用 v-on:input="change" 实现即可 App.vue <template> <div> <md-field ...

  5. 详解Vue 如何监听Array的变化

    详解Vue 如何监听Array的变化:https://www.jb51.net/article/162584.htm

  6. 9.Vue.js 监听属性

    本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化. 以下实例通过使用 watch 实现计数器: <div id = "app&q ...

  7. 05: 使用axios/vue-resource发送HTTP请求

    1.1 axios 简介与安装 1.axios简介 1. vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 2. axios是一个基于Promise的HTTP请 ...

  8. vue.js 监听属性的学习/ 千米、米的转换 /时、分、秒 的转换

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. vue+hbuilder监听安卓返回键问题

    1.监听安卓返回键问题 效果:在一级页面按一下返回键提示退出应用,按两下退出应用;在其它页面中,按一下返回上个历史页面 1 2 import mui from './assets/js/mui.min ...

随机推荐

  1. 一、Java 23 种设计模式简介

    一.23种设计模式分类: 二.设计模式的六大原则: 1.开闭原则(Open Close Principle):对扩展开放,对修改关闭.在程序需要进行拓展的时候,不能去修改原有的代码,实现一个热插拔的效 ...

  2. CSS引入本地字体与在线字体

    有些时候为了强调某些文字,需要使用一些比较特别的字体,CSS中现在也可以比较方便的引入字体了,如下: /* 定义字体 */ @font-face{ font-family: Arista2; src: ...

  3. HTML 练习淡入淡出

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 关于web资金系统提现安全保护,防止极快的重复并发请求导致重复提现的解决思路

    关于WEB金融系统中的提现安全问题很多人没有深入思想,导致有漏洞,常常会遇到有些人遇到被攻击到导资金损失的麻烦,     其实要彻底解决重复并发请求 导致重复提现问题,是需要花点心思的,并没有看起来的 ...

  5. 织梦dedecms如何修改关键词的字数长度限制

    亲测,这个教程比较完善,百度了很多有些少步骤,或者方法根本不对,导致不成功.这个方法我亲子测试了.奏效. 首先登陆数据库后台,如phpmyadmin,找到相应的数据表dede_archives和ded ...

  6. 双因素认证(2FA)教程

    所谓认证(authentication)就是确认用户的身份,是网站登录必不可少的步骤. 密码是最常见的认证方法,但是不安全,容易泄露和冒充. 越来越多的地方,要求启用 双因素认证(Two-factor ...

  7. 特征提取方法: one-hot 和 TF-IDF

    one-hot 和 TF-IDF是目前最为常见的用于提取文本特征的方法,本文主要介绍两种方法的思想以及优缺点. 1. one-hot 1.1 one-hot编码 什么是one-hot编码?one-ho ...

  8. js简单四则运算

    作业来源 本次作业要求来自于:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE1/homework/2166 我的项目GitHub远程仓库地址:https:/ ...

  9. python学习第五讲,python基础语法之函数语法,与Import导入模块.

    目录 python学习第五讲,python基础语法之函数语法,与Import导入模块. 一丶函数简介 1.函数语法定义 2.函数的调用 3.函数的文档注释 4.函数的参数 5.函数的形参跟实参 6.函 ...

  10. 一篇不一样的docker原理解析

    转自:https://zhuanlan.zhihu.com/p/22382728 https://zhuanlan.zhihu.com/p/22403015 在学习docker的过程中,我发现目前do ...