解决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 URL参数读取改进版
Jan 16 Javascript
js下利用控制器载入对应脚本
Jul 17 Javascript
Jquery Ajax请求代码(2)
Jan 07 Javascript
Javascript数据结构与算法之列表详解
Mar 12 Javascript
javascript事件冒泡实例分析
May 13 Javascript
jquery实现图片水平滚动效果代码分享
Aug 26 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
Sep 07 Javascript
基于jquery插件编写countdown计时器
Jun 12 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
Jun 13 Javascript
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
JavaScript你不知道的一些数组方法
Aug 18 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
Oct 16 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新闻发布系统教程
2014/05/09 PHP
php实现批量上传数据到数据库(.csv格式)的案例
2017/06/18 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
JavaScript 内置对象属性及方法集合
2010/07/04 Javascript
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
jquery foreach使用示例
2013/09/12 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
2014/05/27 Javascript
Javascript中的几种URL编码方法比较
2015/01/23 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
2015/03/25 Javascript
jQuery的bind()方法使用详解
2015/07/15 Javascript
JavaScript中字面量与函数的基本使用知识
2015/10/20 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
2016/01/05 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
老生常谈JS中的继承及实现代码
2018/07/06 Javascript
Nuxt配合Node在实际生产中的应用详解
2018/08/07 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
2019/03/28 Javascript
vue动态注册组件实例代码详解
2019/05/30 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
小程序自定义圆形进度条
2020/11/17 Javascript
[01:01:52]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第二场 1月9日
2021/03/11 DOTA
快速实现基于Python的微信聊天机器人示例代码
2017/03/03 Python
python实现守护进程、守护线程、守护非守护并行
2018/05/05 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
基于Python数据结构之递归与回溯搜索
2020/02/26 Python
Python判断字符串是否为空和null方法实例
2020/04/26 Python
CSS3条纹背景制作的实战攻略
2016/05/31 HTML / CSS
html5给汉字加拼音加进度条的实现代码
2020/04/07 HTML / CSS
意大利奢侈品购物网站:Giglio
2018/01/05 全球购物
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
高考标语大全
2014/06/05 职场文书
团队拓展活动总结
2014/08/27 职场文书