CODEWITHSUNDEEP
javascriptjquerybackground-process
user1488946
user1488946

Reputation: 11

Why does my page lock while doing ajax request?

The idea is to generate a heap of thumbnails without geting a server time-out. So I do it one by one with ajax using jQuery.

I have a JavaScript loop running through a set of filenames and asking the server to generate an image for each file. In this case, it's a matter of about 300+ files.

I run through my files and use a separate function to do the ajax request. The top loop wants to display the file currently being processed. But the page appears hanged while the top loop is running. Why? (As you see, i tried to wait a second before calling ajax, but that did not do the trick.)

    function mkImgAll() {
        $.ajaxSetup({ async: true });
        var files = $('.files');
        debugClear();
        for(i=0;i < files.length;i++) {
            var id=files[i].id;
            var file=files[i].value;
            debugSay(id+' '+file);     // <- This does not display 
            sleep(1000);               //                until the  
            mkImg(id, file);           //        loop has finished.
        }
        $.ajaxSetup({ async: ajaxAsyncDefault });
    }

    function mkImg(id, file){
        $('#ajaxWaiting').show(1);
        $.ajax({
            type : 'POST',
            url : 'includes/ajax.php',
            dataType : 'json',
            async: false,
            data: {
                'proc' : 'makeOneThumb',
                'id' : id,
                'file' : file
            },

btw, the debugSay function does this:

    function debugSay(say) {
        if(debug) {
            $("#debugMessage").append("<xmp>"+say+"</xmp>");
        }
    }

Upvotes: 1

Views: 1225

Answers (3)

Ja͢ck
Ja͢ck

Reputation: 173542

Long shot, but you could try this:

if (debug) {
    var dummy = $("#debugMessage").append("<xmp>"+say+"</xmp>").get(0).offsetLeft;
}

That should force refresh the page before the browser gets locked into the sleep(). It's better to use setTimeout() instead of sleep() for that btw, unless your loop really has to pause there.

Upvotes: 0

Chen Kinnrot
Chen Kinnrot

Reputation: 21015

I would try to call the debug with setTimeout...

Upvotes: 0

Lukmo
Lukmo

Reputation: 1688

$.ajax({
....
async: false,

Your request isn't asynchronous. You should put async to true, the use of async: false is deprecated since jquery 1.7 !

Upvotes: 2

Related Questions