Need to keep ajax alive whilst php script is working

Question

Hope someone can help me.

I have a ajax script (index.php) that passes variables to a php file (thumbs.php).

The php file produces thumbnail images from originals and stores them on the server. This process can take quite some time to finish (up to 10minutes).

Whilst this process is going on, I have an overlay that tells the user to wait. This is all working very well.

However, the overlay is supposed to go away, once the php script returns 'true' (i.e. is finished).

The problem: The overlay does not go away. I can see in Firebug that index.php does not wait for the response from thumbs.php. It always times out around 1-1.5 minutes. I somehow need to keep the connection open.

... more code here
    (function worker() {
        $.ajax({
            url: 'thumbs.php',
            type: 'POST',
            dataType: 'json',
            data: dataPass,
            beforeSend: function(){
                $('.overlay').show();
                $('.result').show();
                $('.resultText').html("<center>Please wait whilst we create thumbnail images for this folder.<br><br>This is a one time operation.<br><br>Please be patient.</center>");
            },
            success: function(data){
                $.each(data, function(i, obj){
                alert(obj.count); // THIS should return true when finished
                });
            },
            complete: function() {
                $('.overlay').hide();
                $('.result').hide();
            }
        });
    })();       
...more code here   

EDIT:

Well, I've got a bit furter!

The script now loops fine, but never stops! clearTimeout(timer) doesn't clear, even though both alert boxes show the same id.

Any more help greatly appreciated!

(function poll(){
var timer = 0;
var timer = setTimeout(function(){
alert("timer 1: " + timer);
$.ajax({
    url: 'thumbs.php',
    type: 'POST',
    dataType: 'json',
    data: dataPass,
    success: function(data){
        $.each(data,function(i,j){
            reply = j.count;
        });

        if(reply == 'true'){
            alert("timer 2: " + timer);
            clearTimeout(timer);
            $('.overlay').hide();
            $('.result').hide();
        }
    },
    complete: function(){
        poll();
    }
});
},3000);
})();

More EDIT:

Well, I can see my problem. This code

 if(reply == 'true'){
        alert("timer 2: " + timer);
        clearTimeout(timer);
        $('.overlay').hide();
        $('.result').hide();
    }

is running inside the setTimeout, therefore the timer never gets cleared. Therefore the whole code runs forever. What's the solution?

Answer 1

Increasing PHP timeout limit should solve this. My advice? Don't do that. Sometimes (shared hosting, for example) you even can't, heh.

I'd suggest a little change of approach here. Particularly, my way to go would be to do some polling to a PHP function that checks if the thumbnail was already generated, and only abort the "please wait screen" when this function returns true.

In other words, you'd have an Ajax request that fires periodically (e.g. every 10 seconds) asking this PHP function if the thumbnail process is done and would keep or abort the "please wait screen" depending on the result.

Maybe someone comes up with a more sophisticated (but also more complicated) solution, like using sockets or something like that, but my suggestion seems quite enough for this use case.

EDIT: I completely forgot to mention that you would need your server side thumbnail generating process to be asynchronous for this solution to be efficient, which would probably lead you to use PHP threads. They are quite straightforward for simple use cases.

Answer 2

You are running into either PHP's max_execution_time or your web server's request timeout and the process is likely being killed before finishing. Either way, I would suggest that that you look into changing your architecture to implement a simple queue/scheduler system that can add a job, check on a job's status, and execute a job. Your ajax could then poll every 10 seconds with a setInterval to ask "has jobId finished?" and dismiss the overlay when the answer is true. You really don't want to allow malicious people to pile up multiple 10-minute jobs.