javascript - jquery 中的竞争条件何时/完成序列？

Question

我有一个基于 apache、php、js/jquery 的网络应用程序。当加载文档时，应用程序的一个模块被初始化。该序列调用一个 init() 函数来执行许多任务，其中包括通过 ajax 获取两个 html 对话框并将它们插入到现有页面中。对这些对话框的引用保存为变量，因此我不必在整个脚本中指定 jquery 选择器，而可以简单地使用这些变量。这工作正常，除了在尝试将处理程序绑定(bind)到获取的对话框内的元素时变量“未定义”的情况很少(偶尔......)。这很奇怪，因为除了绑定(bind)之外，对话框在整个应用程序中都可用。这表明 ajax 调用成功，但显然存在某种竞争条件，因此有时仅在绑定(bind)尝试 之后才设置变量。

根据我的理解，这不应该发生，因为绑定(bind)是在 when() 的 .done() 部分完成的，并且只应在 when() 中对话框的 ajax 检索完成后执行。

显然我在这里遗漏了一些基本的东西。有人给我提示吗？

以下引用了工作实现中的代码摘录。它们的某些部分可能在语法上无效，但这只是由于删除了与此处无关的代码部分。未缩短的代码工作正常。

变量:

Shorty.Tracking.Dialog.List:{};
Shorty.Tracking.Dialog.Click:{};

初始化顺序:

$(window).load(function(){
  //...
  var dfd = new $.Deferred();
  $.when(
    // load layout of dialog to show the list of tracked clicks
    Shorty.Tracking.init()
  ).done(function(){
    // bind actions to basic buttons
    Shorty.Tracking.Dialog.List.find('#close').on('click',function(){
      // ...
    });
    // ...
  });
  // ...
})

简化的初始化函数:

Shorty.Tracking.init:function(){
    // ...
    var dfd=new $.Deferred();
    // two dialogs are used by this plugin
    var dialogs={
      'list':  Shorty.Tracking.Dialog.List,
      'click': Shorty.Tracking.Dialog.Click
    };
    // load dialogs from server
    $.each(['list','click'],function(i,dialog){
      if (...){
        // ...
        dfd.resolve();
      }else{
        // load dialog layout via ajax and create a freshly populated dialog
        $.ajax({
          type:     'GET',
          url:      OC.filePath('shorty-tracking','ajax','layout.php'),
          data:     { dialog: dialog},
          cache:    false,
          dataType: 'json'
        }).pipe(
          function(response){return Shorty.Ajax.eval(response)},
          function(response){return Shorty.Ajax.fail(response)}
        ).done(function(response){
          // create a fresh dialog
          // insert it alongside the existing dialogs in the top controls bar
          $('#controls').append(response.layout);
          switch (dialog){
            case 'list':
              Shorty.Tracking.Dialog.List=$('#controls #shorty-tracking-list-dialog').first();
              break;
            case 'click':
              Shorty.Tracking.Dialog.Click=$('#controls #shorty-tracking-click-dialog').first();
          } // switch
          dfd.resolve();
        }).fail(dfd.reject)
      } // else
    }); // each
    return dfd.promise();
  },

---

通过 Bergi 的回答，我显然设法解决了原来的问题。到现在为止，我无法再检测到任何失败的绑定(bind)尝试。但是我无法完全遵循该建议:在他的回答中，他建议删除初始化方法中的 switch 语句以支持直接赋值。这当然要优雅得多，但那是行不通的。我的印象是我对 javascript 如何处理存储在变量中的引用和/或函数有一些误解。

也许您、Bergi 或其他人可以对此做出一些解释:

这是修改后的初始化方法:

  init:function(){
    if (Shorty.Debug) Shorty.Debug.log("initializing tracking list");
    // check if dialogs already exist
    if (   $.isEmptyObject(Shorty.Tracking.Dialog.List)
        && $.isEmptyObject(Shorty.Tracking.Dialog.Click) ){
      // two dialogs are used by this plugin
      var dialogs={
        'list':  Shorty.Tracking.Dialog.List,
        'click': Shorty.Tracking.Dialog.Click
      };
      // load dialogs from server
      var dfds=$.map(dialogs,function(obj,dialog){
        // load dialog layout via ajax and append it to the collection of dialogs in the controls
        return $.ajax({
          type:     'GET',
          url:      OC.filePath('shorty-tracking','ajax','layout.php'),
          data:     { dialog: dialog},
          cache:    false,
          dataType: 'json'
        }).pipe(
          function(response){return Shorty.Ajax.eval(response)},
          function(response){return Shorty.Ajax.fail(response)}
        ).done(function(response){
          // create a fresh dialog and insert it alongside the existing dialogs in the top controls bar
          $('#controls').append(response.layout);
//           obj=$('#controls #shorty-tracking-'+dialog+'-dialog').first();
          switch(dialog){
            case 'list':
              Shorty.Tracking.Dialog.List=$('#controls #shorty-tracking-list-dialog').first();
              break;
            case 'click':
              Shorty.Tracking.Dialog.Click=$('#controls #shorty-tracking-click-dialog').first();
              break;
          } // switch
        })
      }) // map
      return $.when.apply(null, dfds);
    }else{
      // dialogs already loaded, just clean them for usage
      Shorty.Tracking.Dialog.List.find('#list-of-clicks tbody tr').remove();
      new Deferred().resolve();
    } // else
  },

在中间，您会看到赋值语句被注释掉，目前被下面的 switch 语句替换。我尝试了几种变体，比如 obj.element 等等，但都失败了。在函数外部，变量 Shorty.Tracking.Dialog.List 和 Shorty.Tracking.-Dialog.Click 保持为空。

我绝对是 web 东西 ans js/jquery 的新手。但我当然很想了解更多关于这种处理引用的方式。

Answer 1

这是有问题的代码:

var dfd=new $.Deferred();
$.each(['list','click'], function(){
    ...
    dfd.resolve/fail();
});

您只创建了一个 Deferred，但多次解析它。因此，当第一个解析发生时，第二个 Ajax 不会完成。

因此，改为使用两个 Deferred，并通过 jQuery.when() 组合它们.另外，我认为您不需要自己创建 Deferred。只需使用从 pipe() 调用中获得的那两个。

function init() {
   var dialogs={
      'list':  Shorty.Tracking.Dialog.List,
      'click': Shorty.Tracking.Dialog.Click
   };
   var deferreds = $.map(dialogs, function(obj, dialog) {
       return $.ajax(...).pipe(...).done(...
           // really, don't use switch here:
           obj.element = response.layout;
       }); // done() returns the Deferred
   });
   return $.when.apply(null, deferreds);
}

...

$.ready(function($) {
    init().done(...);
});

---

好的，我需要解释一下 switch 语句。的确，dialogs 对象中的值将从 [uninitialized] 变量分配并保持该值 (undefined)，当字段被重新分配给 Shorty 值不会改变。 Javascript 中没有“指针”。我认为只有在成员运算符中使用当前 dialog 变量而不是 switch 语句才有用。要分配给 Shorty.Tracking.Dialog.List 和 .Click，您需要使用类似

var dialogs = ["list", "click"];
var shortcut = Shorty.Tracking.Dialog; // some object
for (var i=0; i<dialogs.length; i++) {
    // loop over them,
    // do the ajax stuff
    var element = $(repsonse.layout); // get the added element from the response
    $('#controls').append(element);

    shortcut[dialogs[i]] = element;
}

(最终使用来自 How do I make the first letter of a string uppercase in JavaScript? 的片段)