解决layer.confirm快速点击会重复触发事件的问题


Posted in Javascript onSeptember 23, 2019

layer.confirm快速点击会重复触发事件问题

1 .问题描述: 快速点击会出现,重复触发事件,像后台发起多次请求,此时后台极端=短时间内多次请求,会出现并发问题,数据脏读

解决layer.confirm快速点击会重复触发事件的问题

2.问题分析 :查看layerUI的API发现,系统的confirm是线程阻塞的,而layer.confirm是非阻塞的

解决layer.confirm快速点击会重复触发事件的问题

3.问题解决

方案1. 防止重复触发事件,前台js加锁

方案2.后台代码加乐观锁

此时,方案1解决这个问题最佳

4.具体实现:

//出库
 output: function () {
   console.log("出库请求---");   	         
   var lock=false;//默认未锁定
   var myconfirm=layer.confirm('是否确认出库?',{btn: ['确定','取消']},function(index){
      console.log('success');
      console.log(lock);
       //
       if(!lock){
      	 lock=true;//锁定
        //发送
       console.log("ajax---");
        //发送ajax
        $.ajax({
         url: '/dubbo/../outBoundByTask.json',
         isAysn: false,
         type: 'get',
         contentType: 'application/json',
         data:params.join('&'),
         success: function (result) {
               	
         	var res=$.parseJSON(result);
         var code=res.code;
         	
         	if(code==0){
         		layer.msg("操作成功!");
         		window.location.reload();
         	}else{
         		layer.msg(res.msg);
         	}
         	
          

         }
        });
       }
       layer.close(myconfirm);
      }
      ,function(index){
       console.log('fail');
      });
    }

以上这篇解决layer.confirm快速点击会重复触发事件的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript-Mozilla和IE中的一个函数直接量的问题
Jan 09 Javascript
自己封装的javascript事件队列函数版
Jun 12 Javascript
深入理解javascript原型链和继承
Sep 23 Javascript
js验证上传图片的方法
May 12 Javascript
javascript制作幻灯片(360度全景图片)
Jul 28 Javascript
jQuery基本过滤选择器用法示例
Sep 09 Javascript
JavaScript中最常见的三个面试题解析
Mar 04 Javascript
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
JavaScript异步加载问题总结
Feb 17 Javascript
详解Node.JS模块 process
Aug 31 Javascript
Vue循环中多个input绑定指定v-model实例
Aug 31 Javascript
原生js实现自定义滚动条组件
Jan 20 Javascript
小程序最新获取用户昵称和头像的方法总结
Sep 23 #Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
Sep 23 #Javascript
layui内置模块layim发送图片添加加载动画的方法
Sep 23 #Javascript
微信头像地址失效踩坑记附带解决方案
Sep 23 #Javascript
微信小程序如何获取用户头像和昵称
Sep 23 #Javascript
微信小程序使用蓝牙小插件
Sep 23 #Javascript
微信小程序实现蓝牙打印
Sep 23 #Javascript
You might like
PHP结合Mysql数据库实现留言板功能
2016/03/04 PHP
PHP图片加水印实现方法
2016/05/06 PHP
微信推送功能实现方式图文详解
2019/07/12 PHP
javascript 多级checkbox选择效果
2009/08/20 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
jquery scroll()区分横向纵向滚动条的方法
2014/04/04 Javascript
node.js实现逐行读取文件内容的代码
2014/06/27 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
2016/02/16 Javascript
基于JavaScript实现自动更新倒计时效果
2016/12/19 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
2016/12/26 Javascript
Mongoose中document与object的区别示例详解
2017/09/18 Javascript
vue 挂载路由到头部导航的方法
2017/11/13 Javascript
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
ES6基础之默认参数值
2019/02/21 Javascript
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
vue实现select下拉显示隐藏功能
2019/09/30 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角
2020/11/03 DOTA
Python实现将一个正整数分解质因数的方法分析
2017/12/14 Python
python实现输入数字的连续加减方法
2018/06/22 Python
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
python接口自动化如何封装获取常量的类
2019/12/24 Python
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
简历中个人自我评价范文
2013/12/26 职场文书
家长给孩子的评语
2014/01/30 职场文书
爱国主义演讲稿
2014/05/07 职场文书
小浪底导游词
2015/02/12 职场文书
初中班级口号霸气押韵
2015/12/24 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL
小程序自定义轮播图圆点组件
2022/06/25 Javascript