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

Question

直接上源码
$(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之后，先终止前一次的遍历，然后开始新的遍历。

Answer 1

并不是什么外部终止遍历，js是同步的，这次点击each很快就会执行完，只是下次点击的几个ajax请求还没有请求完成，所以你要做的是在这次请求之前终止上次的ajax请求。

$(document).on("click",".Ajax", function() {
    $("#list .Title").each(function() {
        var id = $(this).data("id");
        $(this).ajax && $(this).ajax.abort()
        $(this).ajax = $.ajax(...)
    })
})

Answer 2

你可以看一下函数防抖和函数节流，$(document).on("click",".Ajax", function() {},直接在点击事件这边抽离个函数控制一下就可以了