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

时间:2010-10-09 02:06:55

标签: jquery ajax user-interface post

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

现在我有一个数据表设置。某些操作(键入搜索查询,单击不同的页码等等)会触发一个名为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之前,我应该检查是否还有新请求。如果添加东西没有意义,只是为了删除它们。这很重要吗?如果是这样我应该怎么做?

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

我不知道你的showOverlay()函数是什么样的,但你可以这样做:

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

:animated