JS关于外部终止遍历,然后开始新遍历

名称已经被别人使用了 发布于 03/02 17:59
阅读 37
收藏 0

直接上源码

$(document).on("click",".Ajax", function() {
	$("#list .Title").each(function() {
	var id = $(this).data("id");
	$.ajax({
			type: "get",
			dataType: "json",
			url: "http://xx.com/xx.php?id="+id,
			success: function(data) {
			}
		})
})
})

在面页上点击 Ajax的时候,就会遍历列表去请求ajax,因为ajax反应有点慢无论是同步还是异步还是需要点时间(根据ajax返回的内容去修改列表内容)。那么问题来了,当点击Ajax进行遍历列表之后,再次点击Ajax那么前一次没有执行完的遍历会继续执行,而新的遍历也会在执行,就会造成混乱。不能去隐藏Ajax这个按钮,因为是允许这样的操作的,现在主要想要解决,当点击Ajax之后,先终止前一次的遍历,然后开始新的遍历。

加载中
0
隆回水哥
隆回水哥

ajax请求改成同步的,设两个标志位,可以做到

var stop=false;
var doing=false;

function getAndRefreshData(){
	doing = true;
	$("#list .Title").each(function() {
		if(stop) {
			return false; // 终止执行
		}
		
		var id = $(this).data("id");
		$.ajax({
			type: "get",
			dataType: "json",
			async: false, // 改成同步处理
			url: "http://xx.com/xx.php?id="+id,
			success: function(data) {
			}
		});		
	});
	doing = false;
}

$(document).on("click",".Ajax", function() {
	if(doing){ // 上一次遍历还在执行中
		// 暂时把按钮禁掉
		$(".Ajax").attr("disabled", "disabled");
		stop = true;
		var doingInte = setInterval(function(){
			if(!doing) { // 上一次的遍历已经停下来,发起新的遍历
				stop = false;
				getAndRefreshData();
				clearInterval(doingInte);
				$(".Ajax").removeAttr("disabled");
			}
		}, 1000);
		
		return;
	}
	
	stop = false;
	getAndRefreshData();
});

 

返回顶部
顶部