解决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 页面自动加载函数(兼容多浏览器)
May 18 Javascript
Jquery AutoComplete自动完成 的使用方法实例
Mar 19 Javascript
JS俄罗斯方块,包含完整的设计理念
Dec 11 Javascript
yepnope.js 异步加载资源文件
Sep 08 Javascript
让新消息在网页标题闪烁提示的jQuery代码
Nov 04 Javascript
javascript实现简易计算器
Feb 01 Javascript
javascript设计模式之模块模式学习笔记
Feb 15 Javascript
laravel5.4+vue+element简单搭建的示例代码
Aug 29 Javascript
面包屑导航详解
Dec 07 Javascript
JavaScript中变量、指针和引用功能与操作示例
Aug 04 Javascript
vscode下vue项目中eslint的使用方法
Jan 13 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
Feb 20 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中的ini配置原理详解
2014/10/14 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
PHP结合Redis+MySQL实现冷热数据交换应用案例详解
2019/07/09 PHP
Javascript Cookie读写删除操作的函数
2010/03/02 Javascript
Javascript排序算法之计数排序的实例
2014/04/05 Javascript
浅析node.js中close事件
2014/11/26 Javascript
vue-router:嵌套路由的使用方法
2017/02/21 Javascript
nodejs搭建本地服务器并访问文件的方法
2017/03/03 NodeJs
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
JS实现的自定义map方法示例
2019/05/17 Javascript
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
Vue组件化开发之通用型弹出框的实现
2020/02/28 Javascript
vue-cli3单页构建大型项目方案
2020/04/07 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
2020/11/12 Javascript
详解Python做一个名片管理系统
2019/03/14 Python
详解python实现数据归一化处理的方式:(0,1)标准化
2019/07/17 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
Python生成器generator原理及用法解析
2020/07/20 Python
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
关于canvas绘制模糊问题的解决方法
2019/09/24 HTML / CSS
彪马西班牙官网:PUMA西班牙
2019/06/18 全球购物
写一个函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度
2015/11/18 面试题
介绍一下Linux中的链接
2016/05/28 面试题
考试不及格检讨书
2014/01/09 职场文书
法人代表委托书
2014/04/04 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
2014年电话客服工作总结
2014/12/09 职场文书
关于感谢信的范文
2015/01/23 职场文书
简历中自我评价范文
2015/03/11 职场文书
房地产销售助理岗位职责
2015/04/14 职场文书
创业计划书之酒厂
2019/10/14 职场文书
导游词之阆中古城
2019/12/23 职场文书