Question

我想使用jQuery Promises在另一个html页面中加载一个html页面。但无法加载。以下是代码..

(function ($) {
$(document).ready(function() {

 var loadPageLoaded = function(){ return $('div.loadContainer').load('load.html').promise();}
 var loadAwardsPage = function(){ return $('div#maincontainer').load('assets/templates/awards.html').promise();}


loadPageLoaded().then(loadAwardsPage());


});
})(jQuery)

Answer 1

您可以存储承诺对象并使用$.when()来确定是否履行了这些承诺。像这个例子

function createPromise( baseInfoTemplate ) {
    var baseData = { /* foobar */ };

    return $.Deferred(function( promise ) {
        setTimeout(function() {
            $('#foo').append('<li>' + baseInfoTemplate + ' --> success</li>');
            promise.resolve();
        }, ~~(Math.random() * 8000));
    }).promise();
}

var myPromises = [ ];

myPromises.push( createPromise( 'some data' ) );
myPromises.push( createPromise( 'even moar data' ) );
myPromises.push( createPromise( 'foo bar heay' ) );
myPromises.push( createPromise( 'hey yooo' ) );
myPromises.push( createPromise( 'who wants some?' ) );

$.when.apply( null, myPromises ).done( function() {
    $('#foo').append('<li class="last">all done!</li>');
});

这里使用.apply()因为它接受一个数组作为函数调用的参数。因此，在这种情况下，我们将所有承诺对象传递给.when()。

这是一个示例 JsFiddle Example

Answer 2

下面的代码对我有用，Code很好但是加载第一页所花费的时间是个问题。第二页只能在2-3秒后加载。

(function ($) {
  $(document).ready(function() {

    var loadPageLoaded = function(){ return $('div.loadContainer').load('load.html').promise();}
    var loadAwardsPage = function(){
      var maincontainer = $('div#maincontainer');
      return $.Deferred(function( promise ) {
            maincontainer.load('assets/templates/awards.html');
            promise.resolve();
      }).promise();
    }
    loadPageLoaded().done(function () {
      setTimeout(function () {
        loadAwardsPage();
      }, 2000)
    });
  });
})(jQuery)

Answer 3

then将函数作为参数（一个用于onResolved，另一个用于onRejected）

您的代码正在执行，并且loadPageLoaded()和loadAwardsPage()立即...结果（一个承诺）被传递给.then作为它的参数...但是。然后忽略任何不是一个函数 - 因此没有错误

简单的解决方案是将函数loadAwardsPage作为参数传递给.then - 即删除()

(function($) {
    $(document).ready(function() {
        var loadPageLoaded = function() {
            return $('div.loadContainer').load('load.html').promise();
        }
        var loadAwardsPage = function() {
            return $('div#maincontainer').load('assets/templates/awards.html').promise();
        }
        loadPageLoaded().then(loadAwardsPage);
    });
})(jQuery)

jQuery Promise一个接一个地加载一个html页面

3 个答案: