为什么我的jQuery（时）完成时，在Ajax请求之前，则（）函数触发？ [英] Why does my jQuery when().then() function trigger before the ajax request in when is done?

问题描述

我需要设置一个异步回调，因为功能从远程位置的内容。我这样做：

I need to set an async callback, because a function fetches content from a remote location. I'm doing this:

$.when( priv[box.view.renderWith](content, box.view.gadget_id) ).then(function(late) {
    console.log("done");
    console.log(late)
    console.log($(content))
    $(content).append(late).enhanceWithin();
});

我的在函数触发一个Ajax请求。在它的回调，我返回一个元素附加到 $（内容）。

with my when function triggering a single Ajax request. In it's callback I'm returning an element to append to $(content).

我的问题是，在然后功能火灾，立即和我长的Ajax回调运行前和返回的东西。

My problem is, the then function fires immediately and long before my ajax callback is run and returns something.

问题：
那岂不是可以使用时（）与功能，使一个Ajax请求？我一定要直接发出Ajax请求时（）？或者为什么是则（）引发的，对吗？我怎么能解决这个？

Question:
Is it not possible to use when() with a function that makes an ajax-request? Do I have to make the ajax request directly in when()? Or why is then() triggered right away? How could I workaround this?

谢谢！

编辑： 我目前的片段的版本：

My current version of the snippet:

$.when( priv[box.view.renderWith](content, box.view.gadget_id) ).then(function(fragment) {
    // DOM manip...
    console.log("NOW WE ARE DONE WITH WHEN");
    console.log(fragment)
    $(content).append(fragment).enhanceWithin();
});

和功能，我打电话（不包括内容生成部分）：

And the function, I'm calling (without content generation part):

priv.constructListbox = function (element, internal) {
  var no_data_body,
    no_data_cell,
    portable,
    gadget_id = element.getAttribute("data-gadget-id") || internal,
   settings = priv.gadget_properties[gadget_id],
    portal_type = settings.portal_type_title,
    // wrapper
    $parent = $(element.parentNode);

  if (settings !== undefined) {

   // ASYNC > this will trigger an Ajax request
    portable = priv.erp5.allDocs({
      "query": "type: \"" + settings.datasource + "\"",
      "limit": [0, (settings.configuration.pagination.items_per_page_select[0] || 30)],
      "wildcard_character": "%",
      "include_docs": true
    }).always(function (answer) {

      .... stuff ...

      // finish
      // return to calling function
      if (internal) {
        console.log("foo");
        console.log("no we only give back a fragment");
        return fragment_container;
      }
      $parent.empty().append( fragment_container ).enhanceWithin();
    });

    // if internal call, return the promise object
    if (internal) {
      console.log("foo internal, promise");
      return portable;
    }
  } else {
    // error handler
   }
};

当我安慰移动我的然后回调里面，我得到的诺对象，所以现在函数返回的承诺VS元素。然而，当解决了，我希望我会得到我的 fragment_container 当我不...得到任何东西： - （

When I console portable inside my then callback, I get the promise object, so now the function is returning the promise vs an element. However when resolved, I was hoping I would get my fragment_container when I'm not ... getting anything :-(

希望很清楚。

推荐答案

最好的意见，我听说过是把异步编程像正常的功能，然后在末尾添加的承诺。

Best advice I ever heard is to treat Async programming like normal functions and then add the promises at the end.

我有diffculty看到你在哪里设置fragment_container，但在这里不用..

I'm having diffculty seeing where you are setting fragment_container, but here goes..

priv.constructListbox = function (element, internal) {
   var dfd = new $.Deferred();

   ...

   if (settings !== undefined) {

     portable = priv.erp5.allDocs({
       "query": "type: \"" + settings.datasource + "\"",
       "limit": [0, (settings.configuration.pagination.items_per_page_select[0] || 30)],
       "wildcard_character": "%",
       "include_docs": true
     }).always(function (answer) {

  .... stuff ...

       // finish
       // return to calling function
       if (internal) {
         console.log("foo");
         console.log("no we only give back a fragment");
         dfd.resolve({message:"You did it!", element: fragment_container });
       }
       $parent.empty().append( fragment_container ).enhanceWithin();
     });
   } else {
     dfd.reject({result:"Nope - no data came out"});
    // error handler
   }
   return dfd.promise();
}; 

然后很容易地看到你所返回：

then it's easy to see what you've returned:

$.when( priv[box.view.renderWith](content, box.view.gadget_id) ).then(function(fragment) {
    console.log("NOW WE ARE DONE WITH WHEN");
    console.log(fragment);
},
function(fragment) {
    console.log("It failed");
    console.log(fragment);
});

这篇关于为什么我的jQuery（时）完成时，在Ajax请求之前，则（）函数触发？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！