暂停执行直到ajax请求完成

Is there a way to suspend jquery execution while waiting for requests to finish, so that you can track its progress? This is my code:

有没有办法在等待请求完成时暂停jquery执行,以便您可以跟踪其进度?这是我的代码:

    $("span").click(function() {
        istrainning= true;
        for (var i=0;i<1000;i++)
            $.post("train.php",function(){
                $(".progressbar").width((i/10)+"%");
                $("label").html((i/10)+"%");
            });
    });

I want the statements

我想要这些陈述

$(".progressbar").width((i/10)+"%");
$("label").html((i/10)+"%");

to execute only after finishing post request. please help.

仅在完成发布请求后执行。请帮忙。

--EDIT:

Sorry. It seems like my mistake is the 1000 requests being done all at the same time. is there a way to do it where all request will be done one at a time?

抱歉。似乎我的错误是1000个请求同时完成。有没有办法做到这一点,所有请求将一次完成一个?

3 个解决方案

#1

They are already inside the success callback so they already will execute after the POST is complete.

它们已经在成功回调中,因此它们已经在POST完成后执行。

I believe your problem is that the loop is complete when the first ajax is done, and as such, i will always be 1000

我相信你的问题是当第一个ajax完成时循环完成,因此,我将永远是1000

Have a look at http://fixingthesejquery.com/#slide55

看看http://fixingthesejquery.com/#slide55

I don't think posting a 1000 HTTP requests is a particularly good idea, but to avoid the i scoping issue, you can use a closure:

我不认为发布1000个HTTP请求是一个特别好的主意,但为了避免我的范围问题,您可以使用闭包:

$("span").click(function() {
    istrainning= true;
    for (var i=0;i<1000;i++) {
        $.post("train.php",(function(i){
            return function() {
                $(".progressbar").width((i/10)+"%");
                $("label").html((i/10)+"%");
            }
        })(i)); // supply i as a parameter to the IIFE
    }
});

#2

You could append .done(function() {....}) to your code to get something to run when successfully completed. .always() will run if successful or not.

您可以将.done(function(){....})附加到代码中,以便在成功完成后运行。如果成功与否,.always()将运行。

jQuery.post( ) .done( ) and success:

jQuery.post()。done()和成功:

#3

The problem is the wrong use of closure variable in a loop.

问题是在循环中错误地使用闭包变量。

$("span").click(function () {
    istrainning = true;
    var counter = 0,
        handler = function () {
            counter++;
            $(".progressbar").width((counter / 10) + "%");
            $("label").html((counter / 10) + "%");
        }
    for (var i = 0; i < 1000; i++) {
        $.post("/echo/html/", {
            html: '<b>' + i + '</b>'
        }, handler);
    }
});

Demo: Fiddle - simulates with only 5 loops

演示:小提琴 - 只用5个循环模拟

JavaScript closure inside loops – simple practical example

循环内的JavaScript闭包 - 简单实用的例子

Creating closures in loops: A common mistake

在循环中创建闭包:一个常见的错误

Note: Sending a 1000 ajax requests is never a good design, hopefully it is just done to test something

注意:发送1000个ajax请求绝不是一个好的设计,希望它只是为了测试一些东西

#1