解决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 相关文章推荐
jquery 插件 任意位置浮动固定层
Dec 25 Javascript
有趣的JavaScript数组长度问题代码说明
Jan 20 Javascript
JavaScript执行效率与性能提升方案
Dec 21 Javascript
js模拟滚动条(横向竖向)
Feb 22 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
Nov 05 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 Javascript
AngularJs实现ng1.3+表单验证
Dec 10 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
Oct 27 Javascript
vue脚手架搭建过程图解
Jun 06 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
Jul 10 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
Aug 28 Javascript
js实现图片上传即时显示效果
Sep 30 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
ThinkPHP模板判断输出Present标签用法详解
2014/06/30 PHP
PHP设计模式之适配器模式定义与用法详解
2018/04/03 PHP
Javascript 不能释放内存.
2006/09/07 Javascript
js当一个变量为函数时 应该注意的一点细节小结
2011/12/29 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
javascript通过className来获取元素的简单示例代码
2014/01/10 Javascript
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
angularjs 源码解析之scope
2016/08/22 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
vue几个常用跨域处理方式介绍
2018/02/07 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
nodejs基础之多进程实例详解
2018/12/27 NodeJs
React 实现拖拽功能的示例代码
2019/01/06 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
jQuery 选择方法及$(this)用法实例分析
2020/05/19 jQuery
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
浅谈javascript事件环微任务和宏任务队列原理
2020/09/12 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
2020/12/10 Vue.js
JS获取一个字符串中指定字符串第n次出现的位置
2021/02/10 Javascript
Python中with及contextlib的用法详解
2017/06/08 Python
Python堆排序原理与实现方法详解
2018/05/11 Python
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
2019/03/30 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
Python Web框架之Django框架Form组件用法详解
2019/08/16 Python
python可视化实现KNN算法
2019/10/16 Python
使用Python获取当前工作目录和执行命令的位置
2020/03/09 Python
python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
2020/04/24 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
windows10在visual studio2019下配置使用openCV4.3.0
2020/07/14 Python
卡西欧G-SHOCK英国官网: 防水防震手表
2018/01/08 全球购物
4s客服专员岗位职责
2013/12/01 职场文书
安卓程序员求职信
2014/02/28 职场文书
计划生育标语
2014/06/23 职场文书
承兑汇票转让证明怎么写?
2014/11/30 职场文书
庆七一活动简报
2015/07/20 职场文书
Go微服务项目配置文件的定义和读取示例详解
2022/06/21 Golang