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 ...
随机推荐
- 4.JAVA-数组、String详解
1.数组 public class Test{ public static void main(String args[]){ int[] intArray = new int[] {1,4,3,2, ...
- idea配置tomcat运行按钮置灰,下拉没有自定义的tomcat选项
一.问题 下拉没有自定义tomcat的选项 run按钮置灰,点不了 二.解决 添加自己的tomcat时,一定要点加号,不要用那个默认的.
- 给WEB初学者的一些有效率的建议
因为IT互联网发展的非常迅速,而web前端这块很火,目前工资水平给的很高,在市场上也是非常的稀缺人才,现在各个行业转行做web前端的很多,今天给大家一些建议,希望新手少走点弯路吧! 建议一:有一个比较 ...
- Adreno OpenCL坑——bool转int
在项目代码中为了避免条件分支,需要把bool变成int的形式,然后通过向量运算的形式和单个单个的形式,其结果却是不同,向量的方式为(-1, 0),而单个的转换则为(1, 0) 有如下kernel代码: ...
- SVN使用规范
1.提交之前先更新.当完成功能之后,首先检查自己修改了什么 ,然后通过编译并且自己测试之后,谨慎地提交,不可强行提交. 2.在更新时注意所更新文件的列表,如果提交过程中产生了更新,也需要重新编译并且完 ...
- 解决Maven环境变量配置后,’mvn’不是内部或外部命令的问题
1. 前往https://maven.apache.org/download.cgi下载的Maven程序,解压放在一个路径下 2.新建环境变量MAVEN_HOME,赋值:解压路径如: D:\env\ ...
- 手机web——自适应网页设计(html/css控制)【转】
一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的?其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name="v ...
- [原创] 分享我们自己搭建的微信小程序开发框架——wframe及设计思想详解
wframe不是控件库,也不是UI库,她是一个微信小程序面向对象编程框架,代码只有几百行.她的主要功能是规范小程序项目的文件结构.规范应用程序初始化.规范页面加载及授权管理的框架,当然,wframe也 ...
- Go中链路层套接字的实践
1. 介绍 2. 服务端 3. 协议头部 4. 客户端 5. 总结 1. 介绍 接上次的博客,按照约定的划分,还有一层链路层socket.这一层就可以自定义链路层的协议头部(header)了,下面是目 ...
- Ubuntu16 Nginx的安装与基本配置
关于Nginx 它是一个轻量级.高性能.稳定性高.并发性好的HTTP和反向代理服务器,当我们搭建自己的应用时,通常用它作为反向代理服务器,图片服务器和负载均衡. 1.Ubuntu 16安装 Nginx ...