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

原理:

每次监听到输入值变化,就打一个时间戳,然后暂停2秒再去提交post验证。

但是每次提交前,判断一下之前打的时间戳和现在时间是否大于2秒,如果大于,则真去提交post,否则return掉不执行。

以下是代码片段:

  1. data () {
  2. return {
  3. captchaInputLastTime:null,
  4. }
  5.  
  6. watch: {
  7. // 监听验证码变化
  8. 'formData.captcha': async function(newVal){
  9.  
  10. var delay = 2000;//延迟2000 毫秒执行
  11. this.captchaInputLastTime = (new Date()).valueOf();
  12. await this.$root.sleep(delay);
  13. var nowTime = (new Date()).valueOf();
  14. var gap = nowTime - this.captchaInputLastTime;
  15. if( gap < delay){
  16. return
  17. }
  18.  
  19. axios.post。。。。。执行验证逻辑。
  20. }
  21.  
  22. methods: {
  23. sleep (ms = 1000) {
  24. return new Promise((resolve)=>setTimeout(resolve,ms));
  25. },
  26. }

  

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. 4.JAVA-数组、String详解

    1.数组 public class Test{ public static void main(String args[]){ int[] intArray = new int[] {1,4,3,2, ...

  2. idea配置tomcat运行按钮置灰,下拉没有自定义的tomcat选项

    一.问题 下拉没有自定义tomcat的选项 run按钮置灰,点不了 二.解决 添加自己的tomcat时,一定要点加号,不要用那个默认的.

  3. 给WEB初学者的一些有效率的建议

    因为IT互联网发展的非常迅速,而web前端这块很火,目前工资水平给的很高,在市场上也是非常的稀缺人才,现在各个行业转行做web前端的很多,今天给大家一些建议,希望新手少走点弯路吧! 建议一:有一个比较 ...

  4. Adreno OpenCL坑——bool转int

    在项目代码中为了避免条件分支,需要把bool变成int的形式,然后通过向量运算的形式和单个单个的形式,其结果却是不同,向量的方式为(-1, 0),而单个的转换则为(1, 0) 有如下kernel代码: ...

  5. SVN使用规范

    1.提交之前先更新.当完成功能之后,首先检查自己修改了什么 ,然后通过编译并且自己测试之后,谨慎地提交,不可强行提交. 2.在更新时注意所更新文件的列表,如果提交过程中产生了更新,也需要重新编译并且完 ...

  6. 解决Maven环境变量配置后,’mvn’不是内部或外部命令的问题

    1. 前往https://maven.apache.org/download.cgi下载的Maven程序,解压放在一个路径下 2.新建环境变量MAVEN_HOME,赋值:解压路径如:  D:\env\ ...

  7. 手机web——自适应网页设计(html/css控制)【转】

    一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的?其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name="v ...

  8. [原创] 分享我们自己搭建的微信小程序开发框架——wframe及设计思想详解

    wframe不是控件库,也不是UI库,她是一个微信小程序面向对象编程框架,代码只有几百行.她的主要功能是规范小程序项目的文件结构.规范应用程序初始化.规范页面加载及授权管理的框架,当然,wframe也 ...

  9. Go中链路层套接字的实践

    1. 介绍 2. 服务端 3. 协议头部 4. 客户端 5. 总结 1. 介绍 接上次的博客,按照约定的划分,还有一层链路层socket.这一层就可以自定义链路层的协议头部(header)了,下面是目 ...

  10. Ubuntu16 Nginx的安装与基本配置

    关于Nginx 它是一个轻量级.高性能.稳定性高.并发性好的HTTP和反向代理服务器,当我们搭建自己的应用时,通常用它作为反向代理服务器,图片服务器和负载均衡. 1.Ubuntu 16安装 Nginx ...