javascript - $.each 不更新 css 宽度

Question

所以我有一个循环，它在每次迭代时执行一个 ajax 调用，我想设置进度条更新..但它没有更新，结束时直接进入 100%...

我尝试将条形更新调用放在成功操作之外(直接在循环内)，但它也不起作用..

$('button.page').on('click', function(e){
    var $userList = textArray($('#page-userlist').val().replace('http://lop/', '').split(/\n/));
    var $proxyList = textArray($('#page-proxylist').val().replace('http://', '').split(/\n/));
    var $question = $('#page-question').val();
    var data = {
        question: $question,
        users: $userList,
        proxies: $proxyList
    };
    var i = 0, p = 0, max = data.proxies.length, totalusers = data.users.length, percent = 0;
    $('#log').append("\n" + moment().calendar() + "\n");
    var progressbar = $('#page-progress');
    $.each(data.users, function(k, u){
        if(typeof(p) !== 'undefined' && p !== null && p > 0)
        {
            if(i % 10 == 0 && i > 1) p++;
            if(p == max) return false;
        }
        var proxy = data.proxies[p];
        percent = Math.round((i / totalusers) * 100);
        $.ajax({
            type: "POST",
            url: Routing.generate('viral_admin_bot_page'),
            data: {question: $question, user: u, proxy: proxy},
            success: function(result) {
                $('#log').append("\nAtacado usuario " + u + " con proxy: " + proxy + "\n");
                $(progressbar).width(percent + "%");
            },
            error: function(error) {
                $('#log').append(error);
            }
        });


        i++;
    });
});

如果我执行 console.log(percent); 它会在每次迭代中完美更新，所以我不知道问题出在哪里。

这是我的代码(没有 ajax 调用，因为这不是问题所在)http://jsfiddle.net/dvo1dm03/20/

它将输出控制台百分比，目的是将条形更新为每个循环中完成的百分比，因此它会“实时”循环。

Answer 1

好的，这是异步执行的方法。

var speed = 75;
var number_of_calls_returned = 0;  // add number_of_calls_returned++ in your ajax success function
var number_of_total_calls;
var loaded = false;

function processUserData(){
    if( number_of_calls_returned < number_of_total_calls){
        setTimeout(function(){processUserData();}, 200);
    }
    else{
        //received all data
        // set progressbar to 100% width
        loaded = true;
        $("#page-progress").animate({width: "100%"},500);
        $("#page-proxylist").val("Received data");
    }
}

function updateProgress(percent, obj){
    setTimeout(function(x){
        if(!loaded)
        $(obj).width(x + "%");
    }, percent*speed, percent);  
}


$('button.page').on('click', function (e) {
    var $userList = textArray($('#page-userlist').val().replace('http://lop/', '').split(/\n/));
    var $proxyList = textArray($('#page-proxylist').val().replace('http://', '').split(/\n/));
    var $question = $('#page-question').val();
    var data = {
        question: $question,
        users: $userList,
        proxies: $proxyList
    };
    var i = 0,
        p = 0,
        max = data.proxies.length,
        totalusers = data.users.length,
        percent = 0;
    //$('#log').append("\n" + moment().calendar() + "\n");
    var progressbar = $('#page-progress');

    number_of_total_calls = totalusers;
    $.each(data.users, function (k, u) {
        if (typeof (p) !== 'undefined' && p !== null && p > 0) {
            if (i % 10 == 0 && i > 1) p++;
            if (p == max) return false;
        }
        var proxy = data.proxies[p];
        percent = (i / totalusers) * 100;  //much smoother if not int
        updateProgress(percent, progressbar);
        i++;
        // simulate ajax call
        setTimeout(function(){number_of_calls_returned++;}, Math.random()*2000);
    });

    //callback function
    setTimeout(function(){processUserData();}, 200);  
});

var textArray = function (lines) {
    var texts = []
    for (var i = 0; i < lines.length; i++) {
        // only push this line if it contains a non whitespace character.
        if (/\S/.test(lines[i])) {
            texts.push($.trim(lines[i]));
        }
    }

    return texts;
}

请看这里! jsFiddle (真的很酷!)