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 ...
随机推荐
- Angular(01)-- 架构概览
声明 本系列文章内容梳理自以下来源: Angular 官方中文版教程 官方的教程,其实已经很详细且易懂,这里再次梳理的目的在于复习和巩固相关知识点,刚开始接触学习 Angular 的还是建议以官网为主 ...
- Android远程桌面助手(B1413)
ARDC(B1413) 1.解决Android9显示黑屏问题;2.解决向导菜单显示异常问题;3.解决部分手机无法正常连接的问题;4.切换到WiFi连接时,增加显示NetworkID;5.更新图片压缩的 ...
- 【原】无脑操作:ElasticSearch学习笔记(01)
开篇来自于经典的“保安的哲学三问”(你是谁,在哪儿,要干嘛) 问题一.ElasticSearch是什么?有什么用处? 答:截至2018年12月28日,从ElasticSearch官网(https:// ...
- 致 CODING 用户的元宵问候
元宵快乐! 感谢您一直以来对 CODING 的理解与支持.2019 年 CODING 也走入了创业的第五个年头,为了将"让开发更简单"的愿景落地,我们做了许多探索,产品完成度也在不 ...
- CORS的简单理解
去年我在做一个项目,是关于标签打印的,它就是一个Windows程序,提供标签打印功能,由其它程序(包括网站)告诉它需要打印怎样的标签,它就出标签,这个“告诉它需要怎样的标签”的过程,是通过HTTP的P ...
- 视频直播 object 标签属性详解
最近在做视频直播这一块的,html5的video不能实现此功能,在网上查找了资料,觉得很有用. 一.介绍: 我们要在网页中正常显示flash内容,那么页面中必须要有指定flash路径的标签.也就是OB ...
- 双因素认证(2FA)教程
所谓认证(authentication)就是确认用户的身份,是网站登录必不可少的步骤. 密码是最常见的认证方法,但是不安全,容易泄露和冒充. 越来越多的地方,要求启用 双因素认证(Two-factor ...
- Docker 删除&清理镜像
文章首发自个人网站:https://www.exception.site/docker/docker-delete-image 本文中,您将学习 Docker 如何删除及清理镜像? 一.通过标签删除镜 ...
- Vue.js-04:第四章 - 页面元素样式的设定
一.前言 前端开发中有三大件:HTML.CSS.JavaScript,在前面的学习中,不管是学习 Vue 的指令系统还是 Vue 的事件修饰符,主要还是针对的是我们在前端开发中的 JavaScript ...
- 从ASP.NET Core2.2到3.0你可能会遇到这些问题
趁着假期的时间所以想重新学习下微软的官方文档来巩固下基础知识.我们都知道微软目前已经发布了.NET Core3.0的第三个预览版,同时我家里的电脑也安装了vs2019.So,就用vs2019+.NET ...