解决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 相关文章推荐
js实现ASP分页函数 HTML分页函数
Sep 22 Javascript
国外的为初学者写的JavaScript教程
Jun 09 Javascript
JQuery 写的个性导航菜单
Dec 24 Javascript
一次失败的jQuery优化尝试小结
Feb 06 Javascript
jQuery中append()方法用法实例
Jan 08 Javascript
jQuery浏览器CSS3特写兼容实例
Jan 19 Javascript
浅谈 Vue v-model指令的实现原理
Jun 08 Javascript
Vue中的Vux配置指南
Dec 08 Javascript
JS实现利用两个队列表示一个栈的方法
Dec 13 Javascript
javascript关于“时间”的一次探索
Jul 24 Javascript
用jQuery实现抽奖程序
Apr 12 jQuery
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
小程序最新获取用户昵称和头像的方法总结
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
如何使用脚本模仿登陆过程
2006/11/22 PHP
ThinkPHP 404页面的设置方法
2015/01/14 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
如何用js控制css中的float的代码
2007/08/16 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
2013/01/08 Javascript
js动态修改整个页面样式达到换肤效果
2014/05/23 Javascript
javascript面向对象之this关键词用法分析
2015/01/13 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
2015/05/14 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
node Buffer缓存区常见操作示例
2019/05/04 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
2019/05/30 Javascript
vue计算属性无法监听到数组内部变化的解决方案
2019/11/06 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
angular组件间传值测试的方法详解
2020/05/07 Javascript
微信小程序自定义弹出层效果
2020/05/26 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
2020/11/09 Javascript
[50:27]OG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/30 DOTA
Python中几种操作字符串的方法的介绍
2015/04/09 Python
python 读取文件并把矩阵转成numpy的两种方法
2019/02/12 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
24式加速你的Python(小结)
2019/06/13 Python
pyqt5 实现在别的窗口弹出进度条
2019/06/18 Python
Django 对象关系映射(ORM)源码详解
2019/08/06 Python
pytorch 共享参数的示例
2019/08/17 Python
vue常用指令代码实例总结
2020/03/16 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
Vince官网:全球著名设计师品牌,休闲而优雅的服饰
2017/01/15 全球购物
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
企业党员个人自我评价
2014/09/20 职场文书
采购内勤岗位职责
2015/04/13 职场文书
庆七一活动简报
2015/07/20 职场文书
2016教师读书思廉心得体会
2016/01/23 职场文书
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js
MySQL面试题讲解之如何设置Hash索引
2021/11/01 MySQL
MySQL慢查询中的commit慢和binlog中慢事务的区别
2022/06/16 MySQL