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);
    })
})

Answer 2

而不是“on”，你可以使用“one”。这只允许按一下按钮。

$( "#foo" ).one( "click", function( event ) {
  alert( "The " + event.type + " event happened!" );
});

以下是文档的链接：http://api.jquery.com/one/

Answer 3

您队列中的项目似乎正在搜索尚未添加到您的DOM的项目（正在搜索的项目是队列中的stil）。这基本上造成了僵局。一种可能性是客户端队列......

实施客户端队列。当您从服务器获得响应时，只需将项目（您从服务器获得）添加到客户端队列，而不是立即检查DOM的div / id。
有一个迭代通过客户端队列的函数，并针对DOM对队列中的每个项进行比较。如果找到匹配项，请从客户端队列中删除该项，并将其附加到DOM，就像现在一样。
将计时器上的该功能设置为每1秒，3秒等运行一次。这样就可以进行持续的比较。

按钮单击时防止多个排队的POST

3 个答案: