禁用和启用HTML标记，以防止多次点击

Question

我有这样的jQuery的结构：

$(document).on('click', '.view-details', function() { 
    $(this).prop("disabled", true); 
    // API call1 
    // API call2 
    // API call3 
    $(this).prop("disabled", false); 
} 

我已经这样做了禁用和启用，以防止用户点击多次，这是造成多种问题。

这个问题是API调用是异步的，我不想让它们同步。

但让他们异步将执行Line5之前，我不想要的API调用。在每个API上启用成功和失败也是一个很大的努力。

任何其他更好的建议，以确保行5完成后2,3,4？

Answer 1

您可以将AJAX调用返回的延迟对象放入一个数组中，然后apply可以将$.when设置为在所有请求都完成后启用按钮。试试这个：

$(document).on('click', '.view-details', function() { 
    var $el = $(this).prop("disabled", true); 
    var requests = []; 
    requests.push(request1); 
    requests.push(request2); 
    requests.push(request3); 

    $.when.apply(requests).done(function() { 
     $el.prop("disabled", false); 
    }); 
}); 

Answer 2

你可以使用这样的事情：

$.when(api1, api2, api3).done(function(){});