Question

我试图在所有ajax调用完成后调用一个方法，但是某个原因是在ajax调用之一完成之前触发了方法id。我试图将方法保存在ajax完整部分并使用$ .when（）和async：false，但我得到相同的结果。我不知道是不是因为我使用的是jsonp？

我的jquery版本是1.11.0

以下是我的代码

function getBBTrending() {
    bbProductD = [];
    jQuery.ajax({
        type: "GET",
        url: "crazycalls/getbbtrending.php",
        // cache must be true
        cache: true,
        crossDomain: true,
        success: function (data) {
            bbTrending = data.results;
            for (var i = 0; i < 4; i++) {
                getProductdetails(bbTrending[i].productLink);
            }
        },
        dataType: 'json'
    });
}

function getProductdetails(pLink) {
    jQuery.ajax({
        type: "GET",
        url: pLink,
        // cache must be true
        cache: true,
        crossDomain: true,
        success: function (data) {
            pushArray(bbProductD, data);
        },
        dataType: 'jsonp'
    });
}




function pushArray(array1,data1)
{
    array1.push(data1);
}

// this function is executing before pushArray(array1,data1)
jQuery( document ).ajaxStop(function() {
 displayProducts(bbProductD);
})
function displayProducts(bbProductD)
{
    jQuery("#bbButtongroup").show();
    var rProducts = bbProductD; 
    var rating;
    var html = ['<div class="row">']
    for (var i = 0; i < rProducts.length; i++)
    {
           var entry = rProducts[i];
           var title = entry.name
           var Tnail = entry.image;
           var sPrice = entry.salePrice;
           var rPrice = entry.regularPrice;
         var hcode = '<div class="col-sm-6 col-md-4"><div class="thumbnail"><img style="height: 200px; width: 100%; display: block;" src=\" '+ Tnail + '\" alt="..."><div class="caption"><h3 style="font-size: 14px;">'+ title +'</h3><p><span class="label label-info"> Regular Price : '+ rPrice +'</span></p><p><span style="float: right;" class="label label-info">Sale Price :'+ sPrice +'</span></p><p><a href=\"' + entry.url + '\" class="btn btn-primary" role="button">Buy</a><a href="#" class="btn btn-default" role="button">View</a></p></div></div></div>';
         html.push(hcode);
     }
     html.push('</div>');
     document.getElementById('pContainer').innerHTML = html.join('');
}

这是我使用$ .when

添加的方式

jQuery.when( { getBBTrending(),getProductdetails()}).done(function() {
   displayProducts(bbProductD);
});

任何建议？

Answer 1

异步方式，使用async库

function getBBTrending() {
    bbProductD = [];
    jQuery.ajax({
        //stuff...
        success: function (data) {
            bbTrending = data.results;
            async.each(bbTrending, function(element, callback){
                getProductdetails(element.productLink, callback);
            }, function(err){
                displayProducts(bbProductD);
            });
        },
    });
}

function getProductdetails(pLink, callback) {
    jQuery.ajax({
        //stuff
        success: function (data) {
            pushArray(bbProductD, data);
            callback(null);
        },
    });
}

承诺方式，使用jQuery.Deferred和jQuery.when

function getBBTrending() {
    bbProductD = [];
    jQuery.ajax({
        //stuff...
        success: function (data) {
            bbTrending = data.results;
            var promises = [];
            for (var i = 0; i < bbTrending.length; i++) {
                var promise = getProductdetails(bbTrending[i].productLink);
                promises.push(promise);
            }
            jQuery.when.apply(jQuery, promises).then(function(){
                displayProducts(bbProductD);
            });
        },
    });
}

function getProductdetails(pLink) {
    var promise = jQuery.Deferred();
    jQuery.ajax({
        //stuff
        success: function (data) {
            pushArray(bbProductD, data);
            promise.resolve();
        },
    });
    return promise;
}

肮脏的方式。我不推荐这种解决方案，它有很多缺陷。当您需要执行异步操作以保持代码可维护时，请尝试使用库。

var queriesCount, finishedQueriesCount;

function getBBTrending() {
    bbProductD = [];
    jQuery.ajax({
        //stuff...
        success: function (data) {
            bbTrending = data.results;
            queriesCount = 0;
            finishedQueriesCount = 0;
            for (var i = 0; i < bbTrending.length; i++) {
                getProductdetails(bbTrending[i].productLink);
            }
        },
    });
}

function getProductdetails(pLink) {
    queriesCount++;
    jQuery.ajax({
        //stuff
        success: function (data) {
            pushArray(bbProductD, data);
            finishedQueriesCount++;
            if(queriesCount == finishedQueriesCount) {
                displayProducts(bbProductD);
            }
        },
    });
}

在每种情况下，我都会通过//stuff

对代码中对答案不重要的部分进行说明

警告此答案没有错误处理，如果您遇到ajax错误，它将失败（从不调用displayProducts(bbProductD);）。

方法在ajax调用完成之前执行

1 个答案: