Question

好吧，有两种方法可以实现。一个来自演示方面，一个来自“处理”方。

现在我有一个数据表设置。某些操作（键入搜索查询，单击不同的页码等等）会触发一个名为refreshData()的函数

refreshData()首先调用showOverlay()，使用loading.gif图像覆盖覆盖层。然后它执行$.post()请求以获取一些json数据。然后成功调用hideOverlay()，淡出叠加层。

function refreshData()
    {
        showOverlay();
        var parameters = {'page' : '1', 'per-page' : '5'};
        $.post(updateUrl, parameters,
            function(data){
                $('#data-container table tbody').empty();
                $.each(data.users, function(i, user){
                    $('#data-container table tbody').append('<tr>'+
                    '<td>'+ user.name +'</td>'+
                    '<td>'+ user.registered +'</td>'+
                    '<td>'+ user.id +'</td>'+
                    '<td><a href="/users/edit/' + user.id + '">edit</a></td>'+
                    '</tr>'
                    );
                });
                alternateRows();
                hideOverlay();
        }, "json");
    }

我的第一个问题（演示文稿）是，如果重复调用refreshData()，叠加层会反复淡入和淡出。它被堆叠起来，这样即使用户什么都不做，它也会淡入淡出，直到它完成动作的次数为止。如果最近的“请求”结束，它只会消失。

我的第二个问题（处理）可能不重要。我想知道在将“追加”新项目添加到DOM之前，我应该检查是否还有新请求。如果添加东西没有意义，只是为了删除它们。这很重要吗？如果是这样我应该怎么做？

Answer 1

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script>
$(document).ready(function() {
    var timer = 1000; // milliseconds

    var running = false;
    $("#myTextField").keypress(function() {
        if (!running) {
            running = true;

            $.getJSON('object.json', function(data) {
                setTimeout(function() {
                    alert( $("#myTextField").val() );
                    running = false;
                }, timer);
            });
        }
    });
});
</script>
</head>

<body>

<input id="myTextField" type="text" size="100%" />
</body>

</html>

Answer 2

我不知道你的showOverlay（）函数是什么样的，但你可以这样做：

function showOverlay()
{
  if($('#overlay :animated').length > 0 || $('#overlay').hasClass('visible'))
  {
      return;
  }
  //Show overlay
}

:animated

Jquery - 防止ajax请求“堆叠”起来

2 个答案: