Javascript 在单击按钮时防止多个排队的帖子

例如，当用户单击一个按钮时，服务器发送一个div，然后将其附加到正文中，但是没有任何逻辑可以阻止用户对帖子进行排队，直到完成为止

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

我如何预防这个问题

从服务器发送的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);
        }
    })
}) 

$（'body'）。在（'click'，'test#u按钮'，function（）上{
$.post（'get_test_div/'，函数（响应）{
//如果存在未完成的排队帖子，则忽略以下if
if（$（'#test_div'）。长度<1）{
$（'body'）。追加（响应）；
}
})
}) 

您可以使用“一”而不是“开”。 这将只允许单击按钮一次

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

这里是文档链接：

您可以使用“一”而不是“开”。 这将只允许单击按钮一次

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

---

这里是指向文档的链接：

另一种方法是在单击按钮时禁用该按钮。如果需要，您可以再次启用它：

$('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);
    })
}) 

$（'body'）。在（'click'，'test#u按钮'，function（）上{
$（“#测试按钮”）.prop（'disabled'，true）；
$.post（'get_test_div/'，函数（响应）{
//如果存在未完成的排队帖子，则忽略以下if
if（$（'#test_div'）。长度<1）{
$（'body'）。追加（响应）；
}
//重新启用按钮
$（“#测试按钮”）.prop（'disabled'，false）；
})
}) 

另一种选择是在单击按钮时禁用该按钮。如果需要，您可以再次启用它：

$('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);
    })
}) 

$（'body'）。在（'click'，'test#u按钮'，function（）上{
$（“#测试按钮”）.prop（'disabled'，true）；
$.post（'get_test_div/'，函数（响应）{
//如果存在未完成的排队帖子，则忽略以下if
if（$（'#test_div'）。长度<1）{
$（'body'）。追加（响应）；
}
//重新启用按钮
$（“#测试按钮”）.prop（'disabled'，false）；
})
}) 

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

实现客户端队列。当从服务器得到响应时，不要立即检查DOM中的div/id，只需将该项（从服务器获得的）添加到客户端队列中即可

具有一个函数，该函数遍历客户端队列，并将队列中的每个项与DOM进行比较。如果找到匹配项，请从客户端队列中删除该项，并像现在一样将其附加到DOM中

将计时器上的该功能设置为每1秒、3秒等运行一次，这样您就可以进行连续的比较

---

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

实现客户端队列。当从服务器得到响应时，不要立即检查DOM中的div/id，只需将该项（从服务器获得的）添加到客户端队列中即可

具有一个函数，该函数遍历客户端队列，并将队列中的每个项与DOM进行比较。如果找到匹配项，请从客户端队列中删除该项，并像现在一样将其附加到DOM中

将计时器上的该功能设置为每1秒、3秒等运行一次，这样您就可以进行连续的比较

---

你的问题是什么？@MattSpinks用更好的措辞编辑的问题是你正在搜索的

div

中的一个可能在服务器中排队，但尚未附加到DOM中？@MattSpinks是的，这正是问题所在。你能创建一个客户端队列吗？当从服务器得到响应时，不要立即检查div，而是将该项添加到客户端队列。然后可能会有一个函数，该函数遍历客户端队列，并将队列中的每个项目与DOM进行比较。如果找到匹配项，请将其从客户端队列中删除，并将其附加到DOM中。将计时器上的该功能设置为每1秒、3秒运行一次，等等。这样你就可以不断地进行比较。你的问题是什么？@MattSpinks用更好的措辞编辑的是，你正在搜索的

div

中的一个可能在服务器中排队，而不是附加到DOM中的问题吗？@MattSpinks是的，就是这样。你可以创建客户端队列吗？当从服务器得到响应时，不要立即检查div，而是将该项添加到客户端队列。然后可能会有一个函数，该函数遍历客户端队列，并将队列中的每个项目与DOM进行比较。如果找到匹配项，请将其从客户端队列中删除，并将其附加到DOM中。将计时器上的该功能设置为每1秒、3秒等运行一次。这样您就可以进行连续比较。此div也可以关闭，也有其他类型的div，按钮事件需要多次发生此div也可以关闭，也有其他类型的div，按钮事件需要多次发生