解决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 原型模式实现OOP的再研究
Apr 09 Javascript
javascript 选择文件夹对话框(web)
Jul 07 Javascript
javascript parseInt与Number函数的区别
Jan 21 Javascript
Javascript selection的兼容性写法介绍
Dec 20 Javascript
JS的get和set使用示例
Feb 20 Javascript
js获取当前日期前七天的方法
Feb 28 Javascript
jQuery实现可展开合拢的手风琴面板菜单
Sep 15 Javascript
Node.js操作mysql数据库增删改查
Mar 30 Javascript
vue2.0中click点击当前li实现动态切换class
Jun 21 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
Jun 17 Javascript
Vue上传组件vue Simple Uploader的用法示例
Aug 25 Javascript
基于Cookie常用操作以及属性介绍
Sep 07 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
构建简单的Webmail系统
2006/10/09 PHP
PHP新手上路(十三)
2006/10/09 PHP
php的curl实现get和post的代码
2008/08/23 PHP
PHP 金额数字转换成英文
2010/05/06 PHP
php下使用curl模拟用户登陆的代码
2010/09/10 PHP
php购物网站支付paypal使用方法
2010/11/28 PHP
php存储过程调用实例代码
2013/02/03 PHP
PHP图片等比例缩放生成缩略图函数分享
2014/06/10 PHP
php关键字仅替换一次的实现函数
2015/10/29 PHP
php使用ffmpeg向视频中添加文字字幕的实现方法
2016/05/23 PHP
js字符串转换成xml对象并使用技巧解读
2013/04/18 Javascript
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
JavaScript中this的使用详解
2013/11/08 Javascript
JavaScript中使用自然对数ln的方法
2015/06/14 Javascript
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
2016/06/09 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
windows下vue.js开发环境搭建教程
2017/03/20 Javascript
react native实现往服务器上传网络图片的实例
2017/08/07 Javascript
JavaScript中使用Async实现异步控制
2017/08/15 Javascript
JavaScript 中的无穷数(Infinity)详解
2020/02/13 Javascript
node.js中fs文件系统模块的使用方法实例详解
2020/02/13 Javascript
简单介绍Python的轻便web框架Bottle
2015/04/08 Python
python对文件的操作方法汇总
2020/02/28 Python
django的autoreload机制实现
2020/06/03 Python
python tqdm实现进度条的示例代码
2020/11/10 Python
安德玛比利时官网:Under Armour比利时
2019/08/28 全球购物
《画家乡》教学反思
2014/04/22 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
党的群众路线教育实践活动个人对照检查材料(校长)
2014/11/05 职场文书
2015年第十五个全民国防教育日宣传活动方案
2015/05/06 职场文书
怎样写工作总结啊!
2019/06/18 职场文书
微软Win11什么功能最惊艳? Windows11新功能特性汇总
2021/11/21 数码科技
Vue h函数的使用详解
2022/02/18 Vue.js
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL