ASP.NET A problem with jQuery and a WebService's method

Question

I invoke a WebService method asynchronously.

While the method is not complete, I use that jQuery code to update my progress bar (get progress value from that WebService)

   var intervalID = setInterval(updateProgress, 1000);

   function updateProgress() {

            $.ajax({
                type: "GET",
                url: "myPage.aspx/GetProgress",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: true,
                success: function(msg) {
                    $("#result").text = msg.d;
                    var value = $("#progressbar").progressbar("option", "value");
                    if (value < 100) {
                        $("#progressbar").progressbar("value", msg.d);
                        $("#result").text(msg.d);
                    }
                    else {
                        clearInterval(intervalID);
                    }
                }
            });

The problem is, that the browser sends the requests (let's say 15 times) to get the progress value, but that requests are waiting while the asynchronous method is complete. Then, my server sends 15 times that value for the browser.

Why requests are waiting to complete the asynchronous method ??

Nick Craver · Accepted Answer · 2010-07-28 12:14:56Z

1

When you set async: true you're telling the requests to complete sequentially and lock the browser while doing so. If you want the UI to update, then you need to set a timeout instead of an interval, so the UI has time to update between requests, but it would be better to turn async off altogether and use setTimeout() instead, here's what I mean:

function updateProgress() {
    $.ajax({
        type: "GET",
        url: "myPage.aspx/GetProgress",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {
            $("#result").text = msg.d;
            var value = $("#progressbar").progressbar("option", "value");
            if (value < 100) {
                $("#progressbar").progressbar("value", msg.d);
                $("#result").text(msg.d);
            }
            else {
                setTimeout(updateProgress, 1000);
            }
        }
    });
}

This lets the request complete, doesn't lock up the browser or UI thread, and kicks off the next request when the first finishes, with a 1000ms delay, just adjust if needed. Otherwise say the user has 1200ms latency, currently you're queuing up requests that are overlapping...it's best not to use setInterval() in a repeated AJAX situation, since you don't know how long the request itself will take.

answered Jul 28, 2010 at 12:14

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tony Over a year ago

so what would You recomment instead setInterval() to check that progress ?

Nick Craver Over a year ago

@Tony - What's not working? "It isn't working" isn't a very helpful description, be specific about what is/isn't working :)

Tony Over a year ago

OK, I have fileUplad control and button inside the UpdatePanel control. After select a file and click on that button the import starts, and I see the postback is being processed. While that the browser sends the requests for progress, and gets them after that postback

Nick Craver Over a year ago

@Tony - A file upload can't be asynchronous though, it must be uploading through an iframe or other mechanism...XmlHttpRequest can't upload files (for hopefully obvious security reasons). How is it actually sending the file?

Collectives™ on Stack Overflow

ASP.NET A problem with jQuery and a WebService's method

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related