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 ...
随机推荐
- 设计模式 | 原型模式(prototype)
定义: 用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象. 结构:(书中图,侵删) 一个申明克隆自己的接口 若干具体的需要克隆自己的类 这个结构很简单,而且在Java中那个接口是不需 ...
- Multi Reflection (Pro Only)
Case 14 - Double Injection in HTML Context with Double Quotes https://brutelogic.com.br/multi/double ...
- Soot生成代码控制流图
Soot可以对代码进行分析,提供了多种字节码分析和变换功能,通过它可以进行过程内和过程间的分析优化,以及程序流图的生成,还能通过图形化的方式输出. http://www.brics.dk/SootGu ...
- Windows To Go入坑记录
什么是Windows To Go? https://en.wikipedia.org/wiki/Windows_To_Go 微软为了解决企业用户的需求而推出,可以在u盘或者移动硬盘启动window系统 ...
- requirement failed: Unacceptable value for property 'kafka.timeline.metrics.host_in_memory_aggregation', boolean values must be either 'true' or 'false
requirement failed: Unacceptable value for property 'kafka.timeline.metrics.host_in_memory_aggregati ...
- 第二章.python入门
2.1环境的安装 解释器:py2和py3 添加环境变量的作用:便于找到python解释器 开发工具:pycharm 2.2编码 2.2.1编码基础 ascii:只表示英文,8位表示一个元素,pytho ...
- [Inside HotSpot] Java的方法调用
1. 方法调用模块入口 Java所有的方法调用都会经过JavaCalls模块.该模块又细分为call_virtual调用虚函数,call_static调用静态函数等.虚函数调用会根据对象类型进行方法决 ...
- Ocelot.JwtAuthorize:一个基于网关的Jwt验证包
Ocelot作为基于.net core的API方关,有一个功能是统一验证,它的作用是把没有访问权限的请求挡在API网关外面,而不是到达API网关事端的API时才去验证:之前我有一篇博文https:// ...
- string类的几种方法
string str="123abc456";int i=3;1 取字符串的前i个字符 str=str.Substring(0,i); // or str=str.Remov ...
- java~springboot~gradle里的docker集成
在springboot里,我们的task任务可以添加docker构建的功能,在gradle集成环境里,直接可以实现编译,测试,打包镜像的流水线作业,很是方便! 下面分享给大家,在gradle里添加do ...