Javascript $。每个不更新css宽度

所以我有一个循环，它在每次迭代中执行一个ajax调用，我想更新进度条。。但它不是更新，它会在结束时直接100%更新

我尝试将bar update调用置于成功操作之外（直接置于循环内部），但它也不起作用。

$('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（百分比）它在每次迭代中都会进行完美的更新，所以我不知道问题出在哪里

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

它将输出以控制百分比，目的是将条形图更新为每个循环中完成的百分比，因此它与循环一起“实时”运行。
我建议尝试制作一个不依赖于post的自包含示例，以便您或我们更容易解决问题

此外，您还可以控制台日志元素，以便尝试记录progressbar元素、百分比和ajax请求的响应

（此代码用于替换fiddler的javascript部分）

var i=0；
移动进度（）；
函数moveProgress（）{
如果（i<10000）
{
setTimeout（函数（）{
$（'页面进度'）。宽度（（i/1000）*100）；
移动进度（）；
},2);
i++；
}
}

它不起作用的原因是循环运行得太快，以至于在脚本加载它时加载了它，超时允许您稍微延迟执行（但由于潜在的线程问题，不一定建议使用）。使用setTimeout方法更新进度条

它将等待一段时间，然后更新progressbar的宽度

myVar = setTimeout("javascript function",milliseconds);

谢谢，
Ganesh Shirsat
好的，下面介绍如何异步执行

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;
}

var速度=75；
var number_of_calls_returned=0；//在ajax成功函数中添加number_of_calls_returned++
var总呼叫数；
var-load=false；
函数processUserData（）{
if（返回的呼叫数<呼叫总数）{
setTimeout（函数（）{processUserData（）；}，200）；
}
否则{
//已收到所有数据
//将progressbar设置为100%宽度
加载=真；
$（“#页面进度”）.animate（{width:“100%”），500；
$（“#页面proxylist”）.val（“收到的数据”）；
}
}
函数更新进程（百分比，obj）{
设置超时（函数（x）{
如果（！已加载）
$（obj）.宽度（x+“%”）；
}，百分比*速度，百分比）；
}
$（'button.page'）。在（'click'，函数（e）上{
var$userList=textary（$（'#page userList'）.val（）.replace（'http://lop/“，”）。拆分（/\n/）；
var$proxyList=textArray（$（'#页面proxyList'）.val（）.replace（'http://'，''）.split（/\n/）；
var$question=$（“#页面问题”）.val（）；
风险值数据={
问题:问题:，
用户：$userList，
代理：$proxyList
};
var i=0，
p=0，
max=data.proxies.length，
totalusers=data.users.length，
百分比=0；
//$（'#log'）.append（“\n”+moment（）.calendar（）+”\n”）；
var progressbar=$（“#页面进度”）；
呼叫总数=总用户数；
$.each（数据、用户、函数（k、u）{
if（typeof（p）！='undefined'&&p！==null&&p>0）{
如果（i%10==0&&i>1）p++；
如果（p==max）返回false；
}
var proxy=数据代理[p]；
百分比=（i/totalusers）*100；//如果不是int，则更平滑
updateProgress（百分比，进度条）；
i++；
//模拟ajax调用
setTimeout（函数（）{返回的调用次数+++}，Math.random（）*2000）；
});
//回调函数
setTimeout（函数（）{processUserData（）；}，200）；
});
var textArray=函数（行）{
var text=[]
对于（变量i=0；i

请在此处查看！（非常酷！）
您的问题是因为您的成功函数有一个闭包，并且每个成功函数都共享相同的
percent
变量。您可以这样修复它：

success: function(percent, result) {
    $('#log').append("\nAtacado usuario " + u + " con proxy: " + proxy + "\n");
    $(progressbar).width(percent + "%");
}.bind(percent),

您需要在较旧的浏览器或类似的浏览器中使用，这有点难看，但在没有垫片的情况下应该可以在任何地方使用：

success: (function(percent) { return function(result) {
    $('#log').append("\nAtacado usuario " + u + " con proxy: " + proxy + "\n");
    $(progressbar).width(percent + "%");
}; }( percent ),

如果您希望随着AJAX调用的每次成功增加更新栏，我建议一个更简单的解决方案（为了清晰起见，我简化了js代码）：

$（“按钮”）。单击（函数（e）{
var i=0，
cont=0，
totalusers=100，
百分比=0；
var progressbar=$（“#页面进度”）；
对于（；i

你可以在这本书中看到它的作用

希望这能对您有所帮助，或者至少能给您一些想法。
您真的有ID为
-progress
（以连字符开头）的元素吗？很抱歉，我在代码中折射了一些项目，结果搞砸了，代码更新了（确切的代码，但ID正确，当然也有同样的问题）上面提到的控制台日志，您是否也将其放在了success函数中。是的，它不在代码中，因为它是一个测试，但它是，并且也放在ajax调用之前，以确保一切都正常工作，它确实如此，但不影响进度条的宽度：当您发送多个ajax请求时，无法预测响应的顺序威尔
success: (function(percent) { return function(result) {
    $('#log').append("\nAtacado usuario " + u + " con proxy: " + proxy + "\n");
    $(progressbar).width(percent + "%");
}; }( percent ),

$('button').click(function (e) {
    var i = 0,
        cont = 0,
        totalusers = 100,
        percent = 0;
    var progressbar = $('#page-progress');

    for (; i < totalusers; i++) {
        $.ajax({
            type: "POST",
            url: '/echo/json/',
            data: {
                question: 'something',
                user: 1,
                proxy: 2
            },
            success: function (result) {
                cont += 1;
                percent = Math.round((cont / totalusers) * 100);
                progressbar.width(percent + "%");
            },
            error: function (error) {
                $('#log').append(error);
            }
        });
    };
});