Question

此问题涉及并发问题，有关如何显示忙碌图标的建议，请参阅此问题：Javascript - loading/busy indicator or transparent div over page on event click

当用户在页面上发起AJAX请求时，显示某种“工作”或忙碌图标或进度指示器很有用。如果只有一个长时间运行的过程，则可以以相对简单的方式处理：

function do_action() {
   show_busy_icon();       

   long_running_asynchronous_process(function() {
      // Callback function run when process finishes
      hide_busy_icon();
   });
}

但是，如果页面上正在运行多个异步进程，则使用on / off方法将不起作用。即使有其他进程正在运行，第一个完成的过程也会关闭图标。

那么，如何处理在网页上显示指示符，当有一个或多个进程在运行时显示，并在没有进程运行时关闭？

我想可以保持运行进程数的计数。如果进程计数为0，hide_busy_icon()仅隐藏图标。这似乎有点失败。也许有一种更好/更简单的方式，我没有看到。

感谢您的想法和建议！

编辑：在标记答案中使用解决方案一段时间之后，我很高兴地说它运作良好。我遇到的唯一问题是我自己的脚本调用我无法控制的脚本函数的情况。除非这些函数允许提供回调，否则在开始和结束时无法更新进程计数。

可能发生这种情况的一个示例是向Google地图添加一组标记。一旦我的脚本调用谷歌地图功能，繁忙的图标就会消失，而标记仍在加载。

我不确定如何处理这个问题。

Answer 1

如果您想为所有操作使用相同的忙碌指示符，请使用计数器。

执行“increment_busy_icon（）”，如果忙碌计数从0变为1，则调用“show_busy_icon（）”而不是“hide_busy_icon（）”，执行“decrement_busy_count（）” ，如果忙碌计数从1变为0，则调用“hide_busy_icon（）”。

Answer 2

我认为问题实际上是你只使用一个指标。为每个需要一个动作的指标可能更容易。

因此，如果您在网页上进行多次搜索，则每个搜索区域都会拥有自己独立的指标，并在相应的javascript函数中显示或隐藏。

Answer 3

Prototype内置此功能;名为Ajax.activeRequestCount的属性会跟踪在任何给定时间有多少请求处于活动状态。它还允许您设置全局Ajax响应程序，以确定是隐藏还是显示“忙”图标。

Answer 4

请在此处查看我的回答：

How to display a loading screen while site content loads

我给出了一个小的，有效的JavaScript示例，说明如何做到这一点，希望它有所帮助。

Answer 5

我提出了一个不同的解决方案。这不是经过测试的代码，可能不会起作用，但它是概念的一个例子。

我假设在多个实例中没有运行相同的excact操作。我这样做是为了确保通信中的超时或类似问题不会挂起指示符，但允许在重新建立通信时解决指标

 var actionRegister = new Array();

 function register_action(actionId)
 {
     show_busy_icon();       
     if(blockedTile.indexOf(actionId) != -1)
     {  // element already registered
        return;
     }
     actionRegister.push(actionId)
}


function unregister_action(actionId)
{
    var idx = blockedTile.indexOf(actionId);
    if(idx  != -1)
    {  
        actionRegister.splice(idx,1);
    }

    if(actionRegister.length < 1)
    {
       hide_busy_icon();
    }
}

Answer 6

我们都在以错误的方式看待它。 Ajax调用用于使用XHR加载内容。这意味着在加载内容的整个DOM中必须有一些预定义元素。说我们有这种类型的HTML：

<html>
<body>
   <div id="content_1">
   </div>
   <div id="content_2">
   </div>
</body>
</html>

使用jQuery，我们要分别从content_1.php和content_2.php加载到content_1和content_2。

使用以下脚本来处理ajax ::

$("content_1").html("<img src='loading.gif'>").load("http://samplesite.com/content_1.php");

$("content_2").html("<img src='loading.gif'>").load("http://samplesite.com/content_2.php");

这将在各自的div中放置一个加载的gif，后来gif将被来自php的加载内容替换。简单的一行脚本。无需柜台。

要求：任何最新版本的jQuery。

你如何处理AJAX网站中忙碌的图标？

6 个答案: