2

此问题涉及并发问题，有关如何显示忙碌图标的建议，请参阅此问题：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 方法将不起作用。即使有其他进程正在运行，第一个完成的进程也会关闭图标。

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

我想有可能保持对正在运行的进程数的计数。hide_busy_icon()仅当进程计数为 0 时才隐藏图标。这似乎有点容易失败。也许我没有看到更好/更简单的方法。

感谢您的想法和建议！

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

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

我不确定处理这个问题的好方法。

4

6 回答 6

8

如果您希望所有操作都使用相同的忙碌指示器，请使用计数器。

代替“show_busy_icon()”，执行“increment_busy_count()”，如果忙计数从0变为1，则调用“show_busy_icon()”。代替“hide_busy_icon()”，执行“decrement_busy_count()”，它调用如果忙计数从 1 变为 0，则为“hide_busy_icon()”。

于 2008-12-09T18:47:24.843 回答
1

我认为问题在于您只使用了一个指标。为每个需要的操作设置一个指标可能会更容易。

因此，如果您在一个页面上有多个搜索，每个搜索区域都会有它自己的独立指示器，在相应的 javascript 函数中显示或隐藏。

于 2008-12-09T18:40:39.817 回答
1

原型有这个内置的；一个名为的属性Ajax.activeRequestCount跟踪在任何给定时间有多少请求处于活动状态。它还允许您设置全局 Ajax 响应程序以确定是隐藏还是显示“忙碌”图标。

于 2008-12-09T20:34:18.277 回答
0

请在此处查看我的答案：

如何在网站内容加载时显示加载屏幕

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

于 2008-12-09T18:40:33.110 回答
0

我提出了一个不同的解决方案。这不是经过测试的代码，可能无法正常工作，但只是对概念的说明。

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

 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();
    }
}
于 2012-04-18T09:03:41.120 回答
0

我们都以错误的方式看待它。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.ini 加载的内容替换。简单的一行脚本。无需计数器。

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

于 2012-12-31T09:18:03.570 回答