解决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 相关文章推荐
网页里控制图片大小的相关代码
Jun 25 Javascript
用prototype实现的简单小巧的多级联动菜单
Mar 24 Javascript
JavaScript初学者应注意的七个细节详细介绍
Dec 27 Javascript
JS教程:window.location使用方法的区别介绍
Oct 04 Javascript
JavaScript中获取鼠标位置相关属性总结
Oct 11 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
May 20 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
Jul 18 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
Mar 04 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
Sep 14 Javascript
实例分析编写vue组件方法
Feb 12 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性能优化准备篇图解PEAR安装
2011/12/05 PHP
WordPress的文章自动添加关键词及关键词的SEO优化
2016/03/01 PHP
php中字符串和整数比较的操作方法
2019/06/06 PHP
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
语义化 H1 标签
2008/01/14 Javascript
js 鼠标拖动对象 可让任何div实现拖动效果
2009/11/09 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
jquery获得同源iframe内body下标签的值的方法
2014/09/25 Javascript
javascript数组详解
2014/10/22 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
Bootstrap select实现下拉框多选效果
2016/12/23 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
RequireJs的使用详解
2017/02/19 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
2017/03/21 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
2017/05/28 Javascript
jQuery选择器_动力节点Java学院整理
2017/07/05 jQuery
vue修改vue项目运行端口号的方法
2017/08/04 Javascript
JS中使用media实现响应式布局
2017/08/04 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
2017/08/24 jQuery
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
Vue使用lodop实现打印小结
2019/07/06 Javascript
小程序实现图片预览裁剪插件
2019/11/22 Javascript
Vue.js实现大屏数字滚动翻转效果
2019/11/29 Javascript
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
手把手教你实现 Promise的使用方法
2020/09/02 Javascript
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
[01:02:26]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第二场 1月18日
2021/03/11 DOTA
python list语法学习(带例子)
2013/11/01 Python
python使用Pycharm创建一个Django项目
2018/03/05 Python
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
浅谈numpy生成数组的零值问题
2018/11/12 Python
Python标准库itertools的使用方法
2020/01/17 Python
十佳大学生村官事迹
2014/01/09 职场文书
关于感恩的作文
2019/08/26 职场文书