如何使$ .each在jquery中同步?

时间:2019-07-15 15:37:51

标签: javascript jquery ajax

我有一个ajax请求,当成功时有一个对象数组。当我使用$ .each循环时,它异步工作。我在$ .each内部有一个函数。但是代码循环将在循环后继续运行该函数。我想循环执行每个函数。


get_allprogram_byuser();
function get_allprogram_byuser(){
    $.ajax({
    url: ,
    type: "POST",
    data: {},
    success: function (data) {
        obj = JSON.parse(data);
        filteredarray = obj;
        filteredslice = filteredarray;


        $.each(filteredslice, function (data, data) {
            program_count = data.sp_person_count;
            alert(1);
                get_user_rank(data.sp_token, data.sp_id, data.region_id);
        });
    }
    });
}

function get_user_rank(sp_token, sp_id, region_id){

    $.ajax({
    url: "",
    type: "POST",
    data: {sp_token:sp_token,sp_id:sp_id, region_id:region_id},
    success: function (data) {
        obj = JSON.parse(data);
        result = obj[0].result;
        user_id = obj[0].user_id;
        need_people = obj[0].rank;
        ranks = obj[0].ranks;
        alert('2');
        getuser_from_rank(sp_token, sp_id, region_id)
    }
    });


}


function getuser_from_rank(sp_token, sp_id, region_id){

    $.ajax({
    url: "",
    type: "POST",
    data: {sp_token:sp_token,sp_id:sp_id},
    success: function (data) {
        obj = JSON.parse(data);
        filteredarray = obj;
        filteredslice = filteredarray;
        filtered =  filteredslice.filter(function(data) {
            return data;
        });
        $.each(filtered, function (data, data) {
            data['rank'] = rank_count++;
        });
        alert('3');
    }
    });
}

2 个答案:

答案 0 :(得分:0)

对于链式异步请求,最好使用Promise中实现的jquery.ajax()接口。

get_allprogram_byuser().then(function(data) {
    console.log("all done");
    console.log(data)
});

function get_allprogram_byuser(){
    return $.ajax({
        url: ,
        type: "POST",
        data: {},
    }).then(function(data) {
        obj = JSON.parse(data);
        filteredarray = obj;
        filteredslice = filteredarray;
        return Promise.all(filteredslice.map(function(data) {
            return get_user_rank(data.sp_token, data.sp_id, data.region_id);
        });
    });
}

function get_user_rank(sp_token, sp_id, region_id){
    return $.ajax({
        url: "",
        type: "POST",
        data: {sp_token:sp_token,sp_id:sp_id, region_id:region_id},
    }).then(function(data) {
        obj = JSON.parse(data);
        result = obj[0].result;
        user_id = obj[0].user_id;
        need_people = obj[0].rank;
        ranks = obj[0].ranks;
        return getuser_from_rank(sp_token, sp_id, region_id);
    });
}

function getuser_from_rank(sp_token, sp_id, region_id){
    return $.ajax({
        url: "",
        type: "POST",
        data: {sp_token:sp_token,sp_id:sp_id},
    }).then(function(data) {
        obj = JSON.parse(data);
        filteredarray = obj;
        filteredslice = filteredarray;
        filtered =  filteredslice.filter(function(data) {
            return data;
        });
        $.each(filtered, function (data, data) {
            data['rank'] = rank_count++;
        });
        return data;
    });
}

答案 1 :(得分:0)

请谨慎使用$ .each调用中使用的函数;这两个参数都被命名为“数据”。第一个参数是循环的索引。第二个是当前项目。使用索引,您可以使用setTimeout将事情分开:

https://youtu.be/LNqTRs7JJ2Q

enter image description here

https://gist.github.com/brianswisher/90dcf6814b76521465988cf3f567a479