3

简而言之，我有一个有时在页面加载之前完成的 ajax 调用，所以我尝试将回调包装在 中$( fn )，但是如果页面加载，回调不会触发......有人对此有很好的解决方案吗？

$.get( '/foo.json', function( data ){
    $( function(){
        // won't get here if page ready beats the ajax call

        // process data
        $( '.someDiv' ).append( someData );
    } );
} );

是的，我知道如果我翻转它们的顺序，它总是可以工作的，但是我的 ajax 调用将不必要地推迟到文档准备好之前。

4

6 回答 6

1

不，添加到 onDOMready 的函数将始终执行，如果事件已经发生，将立即执行。请参阅http://api.jquery.com/ready/上的文档：仅当您使用$(document).bind("ready")它时，事件已经触发时才会执行。

未触发事件处理程序的一个可能原因是其他处理程序抛出错误。jQuery 有一个用于待执行处理程序的内部数组，处理本机 DOM 加载事件的方法只是对其进行迭代。如果较早的处理程序之一出现错误，则循环中断并且之后添加的其他处理程序将不会被调用。

于 2012-04-10T17:14:24.807 回答
1 
var result;
$(document).on('ready.specialAjax', function () {
   if (result) {
      $(".someDiv").append(result);
   }
});
$.get('/foo.json').done(function (data) {
   if ($(".someDiv").length) {
      $(".someDiv").append(data);
      $(document).off('ready.specialAjax');
   }
   else {
      result = data;
   }
});

本质上，如果可以的话，ajax 会立即尝试附加到 someDiv。否则，它会将 ajax 结果存储在其中，result并document.ready在运行时自行附加。这样.off做是为了防止数据被追加两次，以防 ajax 成功执行。这无关紧要，因为在这种情况下结果将是空白的，但只是为了干净。

于 2012-04-10T17:19:32.517 回答
1

这是使用延迟的另一种方法。显然，您可以使用 deferreds document.ready，这有点奇怪：

$(document).data("readyDeferred", $.Deferred()).ready(function() {
   $(document).data("readyDeferred").resolve();
});
var jqxhr = $.get('/foo.json');
$.when(jqxhr, $(document).data('readyDeferred'))
   .done(function (jqxhr) {
      $(".someDiv").append(jqxhr[2].responseText);
   });
于 2012-04-10T17:26:33.433 回答
0

将结果加载到全局变量中，并将它们加载到 DOM-ready 上。关键是如果结果为空，则迭代setTimeout直到它们不是。

var result;
$.get("/foo.json", function(data) {
    result = data;
});

function insertAJAX() {
    if(result !== undefined) {
        $(".someDiv").append(result);
    } else {
        setTimeout(insertAJAX, 250);
    }
}

$(function() {
    insertAJAX();
});

请注意，您可以添加一个超时计数器以在一定时间后停止尝试，以防您的 AJAX 出于任何原因从不返回结果。

于 2012-04-10T17:16:06.803 回答
0

您需要在 AJAX 回调中检查 dom 是否准备就绪，以确保您要在准备好后追加还是立即追加。见下面的代码，

var isDomReady = false;

$.get( '/foo.json', function( data ){
    if (isDomReady) {
      $(function(){  $('.someDiv').append( someData );   });
    } else {
       $('.someDiv').append( someData );  
    }
} );

$(function(){
   isDomReady = true;
   // and all you ready code
});
于 2012-04-10T17:19:48.377 回答
0

这样做不会有什么坏处。

var getData;
$.get( '/foo.json', function( data ){
    getData = data;
});
$(function() {
    var intt = setTimeinterval(function() {
         if(getData.length) {
              //do your task
              clearInterval(intt);
         }
    }, 100);
});
于 2012-04-10T17:21:57.470 回答