javascript - 防止单击按钮时出现多个排队的 POST

Question

例如，当用户单击一个按钮时，服务器会发送一个 div，然后将其附加到正文中，但是没有逻辑阻止用户将 POST 排队直到没有完成。

这会导致一个问题，即它忽略了只有一个 div 可能存在的逻辑，一旦排队的 POST 完成就立即附加多个。

我怎样才能避免这个问题？

从服务器发送的 Div :

'<div id="test_div"></div>'

按钮事件:

$('body').on('click', '#test_button', function(){
    $.post('get_test_div/',function(response){
        //The following if is ignored if there are uncompleted queued POSTs
        if($('#test_div').length < 1){
            $('body').append(response);
        }
    })
}) 

Answer 1

一种替代方法是在单击按钮时将其禁用。如果需要，您可以再次启用它:

$('body').on('click', '#test_button', function(){

    $('#test_button').prop('disabled', true);

    $.post('get_test_div/',function(response){
        //The following if is ignored if there are uncompleted queued POSTs
        if($('#test_div').length < 1){
            $('body').append(response);
        }

        // re-enables the button
        $('#test_button').prop('disabled', false);
    })
})