javascript - jQuery、对话框、选项卡和数据表 : how to wait for one to finish before going ahead?

Question

我有一个棘手的问题，可以通过链式回调来解决，但这会导致代码相当复杂。

我有一些嵌套组件:一个 jQueryUI 对话框。在里面，我有 jQueryUI 选项卡。在每个选项卡中，我都有一个 DataTables 组件，调用 AJAX 数据。

我的问题是，当我加载对话框中的所有 HTML 时，所有内容都会并行启动:选项卡尝试创建自身，而每个 DataTable 都会同时收集其数据!

结果是一团糟:选项卡没有保存正确的元素，因为在选项卡初始化后，每个 DataTable 都会在 DOM 上创建新节点。对话框假定了错误的尺寸，因为 DOM 在初始化时很小，但在每个 DataTable 显示数据时变大。

为了让事情顺利进行，我需要:

1) Wait for each DataTable to initialize.
2) When they're all done, initialize the Tabs.
3) When Tabs are ready, finally open the Dialog.

有没有简单的方法可以做到这一点？我目前正在使用大量回调，并且所有内容都是动态的、数据库驱动的，因此我必须进行大量概括，几乎没有任何内容可以进行硬编码。这东西已经可以工作了，但是它很丑!

如果可以的话，这是我会关闭 JavaScript 异步行为并使其全部同步和顺序的情况之一。

也许 jQuery 队列、promise 或类似的东西可以帮助我？任何帮助将不胜感激!

Answer 1

我找到了合适的解决方案，因此我将在这里发布它以帮助其他面临类似问题的人。

首先，我发现 DataTables 在创建时触发了一个事件。这是“init”事件:

$("#TableID").on("init", function() { whatever(); } );

其次，我的另一个问题是在初始化选项卡之前我必须等待的数据表数量不确定。因此，我创建了一个名为 RenderManager 的小函数来跟踪我的所有数据表。当最后一个完成时，将调用回调。我使这个函数变得非常通用，因此它可以用于任何需要等待多个并行处理完成才能继续的情况:

function RenderManager(action, id, callback) 
{
  if(typeof RenderManager.groups == 'undefined' ) RenderManager.groups = {};

  switch(action)
  {
    case "init":
      RenderManager.groups[id] = { _callback:callback, _counter:0 };
    break;
    case "add":
      if(typeof RenderManager.groups[id] == 'undefined' ) 
        console.log('Group "'+id+'" referenced before init.');
      else 
        RenderManager.groups[id]._counter++;
    break;
    case "remove":
      if(typeof RenderManager.groups[id] == 'undefined' ) 
        console.log('Group "'+id+'" referenced before init.');
      else
      {
        RenderManager.groups[id]._counter--;
        if(RenderManager.groups[id]._counter == 0) 
          RenderManager.groups[id]._callback();
      }
    break;
  }
}

使用很简单:首先，使用 init 调用它，以告知组名称和所需的回调:

RenderManager('init', 'MyGroup', function() { CreateTabs(); });

对于创建的每个 DataTable(或启动的并行进程)，将其添加到组中:

RenderManager('add', 'MyGroup');

然后将 remove 绑定(bind)到每个 DataTable 的 init 事件(或任何并行进程的结束)，使用:

$("#TableID").on("init", function() { RenderManager('remove', 'MyGroup'); } );

就是这样!当最后一个 DataTable 完成其工作时，CreateTabs(); 将被调用，无论执行顺序如何，无论哪个 DataTable 先完成。

正如您所看到的，这个函数只是一个计数器:当“堆栈”返回到零时，回调将被触发。它可以通过注册每个元素的 ID 来改进，但这对于我当前正在解决的问题来说有点过分了。