js中事件加载完成之前添加蒙版

最新推荐文章于 2023-12-18 17:50:24 发布

java里摸爬滚打的GIS开发人员

最新推荐文章于 2023-12-18 17:50:24 发布

阅读量1k

点赞数

分类专栏： js 文章标签：遮罩层延迟加载

本文链接：https://blog.youkuaiyun.com/qq_33801617/article/details/78394689

版权

js 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用JavaScript防止用户重复点击按钮的方法，通过显示加载蒙版确保数据加载过程中不会因多次点击而引发问题。同时给出了具体的实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在js中，一般测试的时候会出现，连续几次点击一个事件，这时可能会出现多次加载，所以需要一个蒙版来控制，

实现机制是：点击一次之后，数据加载完全之前不允许点击，并且多次点击时无反应；

不多说，直接上代码：

		//遮罩层
	 	function cover() { 
		    var cover = document.getElementById("loadingtree"); 
		    cover.style.display = 'block'; 
		} 

		function hide_cover() { 
		    var cover = document.getElementById("loadingtree"); 
		    cover.style.display = 'none'; 
		}

其中loadingtree，是在html中设定的蒙版<div>的id，用于获取这个div

ajax加载数据：

function getData(){
cover(); //开始加载遮罩层（正在加载中...）
//后台取数据
$.ajax({
	type : "post",
	dataType : "json",
	url : '方法名',
	success : function(data) {
		//加载成功数据不为空时
		 if(null != data){
			 hide_cover();//得到数据之后，关闭遮罩加载中...
			 for(var m=0;m<data.length;m++){
				获取数据并处理
			}
		} 
	},
	error : function(XMLHttpRequest, textStatus, errorThrown) {
		//异常时的处理
	}
});
}

仅供参考