×

vue开发:如何避免用户多次点击

作者:andy0012021.08.09来源:Web前端之家浏览:5881评论:0
关键词:js

在产品页面上,有一些按钮经常会被用户重复点击,尤其是网络慢的时候,经常会出现,所以开发的时候如何避免用户多次点击呢?

方法

在点击事件的方法最前面加上定义变量hasRemind来控制是否执行点击事件里的相应操作

当用户第一次点击的时候,hasRemind = false,此时,进入到第二个if语句,讲hasRemind的值改变为true,并且在3秒后再将hasRemind的值改为false,这是情况下,用户可以正常进入到点击事件里的所有流程

当用户第二次点击的时候,hasRemind=true,此时直接跳出点击事件,等待hasRemind的值为false的时候才能继续进行该点击方法里的系列流程 

  1. //默认可以触发登录的点击事件
  2. hasRemind:false,
  1. //防止连续多次点击
  2. let vm = this;
  3. if(this.hasRemind === true)  return;
  4. if(this.hasRemind === false){
  5.     this.hasRemind = true;
  6.     setTimeout(function(){
  7.        vm.hasRemind = false;
  8.     },3000)
  9. }

这里就是将上述代码段放在了登录的点击事件里,以防止用户多次点此,出现很多条提示信息的情况。

  1.  // "个人登录点击事件"
  2.             registerBtn() {
  3.                 //防止连续多次点击
  4.                 let vm = this;
  5.                 if(this.hasRemind === true)  return;
  6.                 if(this.hasRemind === false){
  7.                     this.hasRemind = true;
  8.                     setTimeout(function(){
  9.                         vm.hasRemind = false;
  10.                     },3000)
  11.                 }
  12.                 var qs = Qs;
  13.                 if (this.logintype == 1) {
  14.                     //账号密码登录
  15.                     if (this.username == "") {
  16.                         this.$message({
  17.                             message: '请输入账号',
  18.                             type: 'warning'
  19.                         });
  20.                         return false;
  21.                     }
  22.                     else if (this.password == "") {
  23.                         this.$message({
  24.                             message: '请输入密码',
  25.                             type: 'warning'
  26.                         });
  27.                         return false;
  28.                     } else {
  29.                         request_POST('/login', qs.stringify({
  30.                             identity: this.username,
  31.                             desStr: this.password,
  32.                             loginType: 1,
  33.                             loginRole: 0
  34.                         })).then((res) => {
  35.                             if (res.data.code == 200) {
  36.                                 localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
  37.                                 //登陆成功
  38.                                 // window.open(this.apiHost + 'uesr/resume', '_parent')
  39.                                 window.open(this.apiHost + 'index/index', '_parent')
  40.                             } else if (res.data.code == 12462) {
  41.                                 this.$message({
  42.                                     message: '用户未注册',
  43.                                     type: 'warning'
  44.                                 });
  45.                                 //跳转到注册页面
  46.                                 setTimeout(() => {
  47.                                     window.open(this.apiHost + 'userregister/userregister',
  48.                                         '_self');
  49.                                 }, 1000)
  50.                             } else if (res.data.code == 12468) { //用户无用户名密码
  51.                                 localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
  52.                                 window.open(this.apiHost + 'uesr/enterAccount', '_parent');
  53.                             } else if (res.data.code == 604) { //用户无简历
  54.                                 localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
  55.                                 window.open(this.apiHost + 'uesr/fillresume', '_parent');
  56.                             } else if (res.data.code == 1077) { //简历未通过审核
  57.                                 localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
  58.                                 window.open(this.apiHost + 'uesr/fillresume', '_parent');
  59.                             } else if (res.data.code == 1075) { //简历审核中
  60.                                 localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
  61.                                 window.open(this.apiHost + 'uesr/audit', '_parent');
  62.                             } else {
  63.                                 this.$message.error(res.data.message);
  64.                             }
  65.                         })
  66.                     }
  67.                 } else {
  68.                     //验证码登录
  69.                     if (this.phone == "") {
  70.                         this.$message({
  71.                             message: '请输入手机号',
  72.                             type: 'warning'
  73.                         });
  74.                         return false;
  75.                     } else if (!(/^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/.test(
  76.                             this.phone))) {
  77.                         this.$message({
  78.                             message: '请输入正确的手机号',
  79.                             type: 'warning'
  80.                         });
  81.                         return false;
  82.                     } else if (this.code == "") {
  83.                         this.$message({
  84.                             message: '请输入验证码',
  85.                             type: 'warning'
  86.                         });
  87.                         return false;
  88.                     } else {
  89.                         request_POST('/login', qs.stringify({
  90.                             identity: this.phone,
  91.                             captcha: this.code,
  92.                             loginType: 2,
  93.                             loginRole: 0
  94.                         })).then((res) => {
  95.                             if (res.data.code == 200) {
  96.                                 localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
  97.                                 window.open(this.apiHost + 'uesr/resume', '_parent');
  98.                             } else if (res.data.code == 12462) {
  99.                                 this.$message({
  100.                                     message: '用户未注册',
  101.                                     type: 'warning'
  102.                                 });
  103.                                 //跳转到注册页面
  104.                                 setTimeout(() => {
  105.                                     window.open(this.apiHost + 'userregister/userregister',
  106.                                         '_self');
  107.                                 }, 1000)
  108.                             } else if (res.data.code == 12468) { //用户无用户名密码
  109.                                 localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
  110.                                 window.open(this.apiHost + 'uesr/enterAccount', '_parent');
  111.                             } else if (res.data.code == 604) { //用户无简历
  112.                                 localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
  113.                                 window.open(this.apiHost + 'uesr/fillresume', '_parent');
  114.                             } else if (res.data.code == 1077) { //简历未通过审核
  115.                                 localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
  116.                                 window.open(this.apiHost + 'uesr/fillresume', '_parent');
  117.                             } else if (res.data.code == 1075) { //简历审核中
  118.                                 localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
  119.                                 window.open(this.apiHost + 'uesr/audit', '_parent');
  120.                             } else {
  121.                                 this.$message.error(res.data.message);
  122.                             }
  123.                         })
  124.                     }
  125.                 }
  126. },

上面只是个DEMO,大家可以尝试下。

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/js20210809a3.html

网友评论文明上网理性发言 已有0人参与

发表评论: