解决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 相关文章推荐
IE与firefox之jquery用法区别
Oct 03 Javascript
利用javascript移动div层-javascript 拖动层
Mar 22 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
May 08 Javascript
使用jquery中height()方法获取各种高度大全
Apr 02 Javascript
总结jQuery插件开发中的一些要点
May 16 Javascript
使用JS正则表达式 替换括号,尖括号等
Nov 29 Javascript
浅谈Node.js:理解stream
Dec 08 Javascript
微信小程序顶部可滚动导航效果
Oct 31 Javascript
Node.js笔记之process模块解读
May 31 Javascript
详解javascript函数写法大全
Mar 25 Javascript
JS实现checkbox互斥(单选)功能示例
May 04 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
Oct 09 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构造函数实例讲解
2013/11/13 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(四)
2014/06/23 PHP
PHP实现十进制、二进制、八进制和十六进制转换相关函数用法分析
2017/04/25 PHP
javascript 写类方式之五
2009/07/05 Javascript
JS实现日期加减的方法
2013/11/29 Javascript
js Calender控件使用详解
2015/01/05 Javascript
移动Web中图片自适应的两种JavaScript解决方法
2015/06/18 Javascript
每天一篇javascript学习小结(面向对象编程)
2015/11/20 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
2016/05/31 Javascript
JS构造函数与原型prototype的区别介绍
2016/07/04 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
2016/07/22 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
3分钟掌握常用的JS操作JSON方法总结
2017/04/25 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
2018/02/11 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
服务端预渲染之Nuxt(使用篇)
2019/04/08 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
vue 实现 rem 布局或vw 布局的方法
2019/11/13 Javascript
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
[40:10]2015国际邀请赛全明星表演赛
2015/08/07 DOTA
Python实现Youku视频批量下载功能
2017/03/14 Python
Django如何配置mysql数据库
2018/05/04 Python
python3使用GUI统计代码量
2019/09/18 Python
python 用户交互输入input的4种用法详解
2019/09/24 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
python如何处理程序无法打开
2020/06/16 Python
GC是什么?为什么要有GC?
2013/12/08 面试题
一个大学生十年的职业规划
2014/01/17 职场文书
学校政风行风自查自纠报告
2014/10/21 职场文书
2015年度服装销售工作总结
2015/03/31 职场文书
MySQL基础(一)
2021/04/05 MySQL
django如何自定义manage.py管理命令
2021/04/27 Python
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis
多人盗宝《绿林侠盗》第三赛季4.5上线 跨平台实装
2022/04/03 其他游戏