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 ...
随机推荐
- DDL(数据定义语言)
1.Oracle中常见的数据类型分类:(A) 1.number(x,y) 数字类型,x表示最大长度,y表示精度对应java中除char外所有基本数据类型(byte.short.int.long.flo ...
- 【IIS】解决IIS无响应假死状态,asp突然无法访问重启后可以使用是什么原因
在IIS6下,经常出现w3wp的内存占用不能及时释放,从而导致服务器响应速度很慢. 可以做以下配置:1.在IIS中对每个网站进行单独的应用程序池配置.即互相之间不影响.2.设置应用程序池的回收时间,默 ...
- Cocos Creator—最佳构建部署实践
这篇文章主要是我们团队在使用Cocos Creator过程中的一些关于部署方面的实践总结,标题党了一回,严格来说,应该是<快看漫画游戏研发团队使用Cocos Creator构建部署最佳实践> ...
- 【专题教程第8期】基于emWin模拟器的USB BULK上位机开发,仅需C即可,简单易实现
说明:1.如果你会emWin话的,就可以轻松制作上位机.做些通信和控制类上位机,比使用C#之类的方便程度一点不差,而且你仅会C语言就可以.2.并且成功将emWin人性化,可以做些Windows系统上的 ...
- Linux vi/vim编辑器常用命令与用法总结
(一)vi/vim是什么?Linux世界几乎所有的配置文件都是以纯文本形式存在的,而在所有的Linux发行版系统上都有vi编辑器,因此利用简单的文字编辑软件就能够轻松地修改系统的各种配置了,非常方便. ...
- 合肥.NET技术社区首次线下聚会全程回顾【多图】
2019年3月16日对于合肥.NET来说是一个特别的日子,因为这是合肥.NET技术社区首次非正式线下聚会!这次聚会受场地限制(毕竟是聚餐的形式),即使换成了小椅子后,最多也只能容纳24个人,所以还有一 ...
- 从零开始学习PYTHON3讲义(十二)画一颗心送给你
(内容需要,本讲使用了大量在线公式,如果因为转帖网站不支持公式无法显示的情况,欢迎访问原始博客.) <从零开始PYTHON3>第十二讲 上一节课我们主要讲解了数值计算和符号计算.数值计算的 ...
- Koa 中的错误处理
不像 express 中在末尾处注册一个声明为 (err, req, res, next) 中间件的方式,koa 刚好相反,在开头进行注册. app.use(async (ctx, next) =&g ...
- JavaScript夯实基础系列(五):类
JavaScript中没有类,是通过使用构造函数和原型模式的组合来实现类似其它面向对象编程语言中"类"的功能.ES6引入的关键字class,形式上向其它面向对象编程语言靠拢,其 ...
- 一个简单的HTML5 Web Worker 多线程与线程池应用
笔者最近对项目进行优化,顺带就改了些东西,先把请求方式优化了,使用到了web worker.发现目前还没有太多对web worker实际使用进行介绍使用的文章,大多是一些API类的讲解,除了涉及到一些 ...