CODEWITHSUNDEEP
jqueryajax
Flo Ragossnig
Flo Ragossnig

Reputation: 1470

Why does the browser lock when having 2 Ajax calls?

I'm trying for hours now but I can't get this to work. PLEASE HELP!

I have 2 Ajax functions where 1 will take 10 seconds to complete, and another one, which will be completed after 2 mili seconds. The 2nd function will be recalled via callback.

But is that not against the theory of asynchronous Ajax? Shouldn't it be possible to have both functions running and outputting at the same time?

Here's the JQuery:

     $('#tbut').click(function(){

        // Declare variables
        var go1 = true;
        var go2 = true;
        var z = 1;

        // Fire 1st Ajax call
        a();

        // 1st function with callback
        function a() {
            $.ajax({
                url: 't2'
            })
             .always(function() {
                console.log('t2 always');
                $('#tdiv').html(z);         // update DIV 
                z = z + 1;
                if (go1) {
                    if (go2) {
                        b();
                    }
                    setTimeout(function(){a()},2); // callback
                }
            });
        };

        // 2nd function
        function b() {
            go2 = false;
            $.ajax ({
                url: 't1'
            })
             .done(function() {
                console.log('fin');
                $('#tdiv').html('fin'); // update DIV
                go1 = false;
            });

        };

       return false;

    });

The controller actions:

   public function actionT1() {
        // make it take a little longer...
        $i=0;
        while ($i < 10) {
            $i++;
            sleep(1);
        }
        exit;
    }

    public function actionT2() {
        // do nothing here at the moment...
        exit;
    }

The view:

<button id="tbut">do something...</button>

<div id="tdiv">now</div>

Upvotes: 1

Views: 915

Answers (1)

Flo Ragossnig
Flo Ragossnig

Reputation: 1470

I solved the (quite obvious problem). I declared no proper return value to my php functions. Just exiting the function is equivalent with "return false" and as I have no success() or error() handler it causes the browser to do weird things (mostly just locking the view completely).

Updated controller functions:

public function actionT1() {
    // make it take a little longer...
    $i=0;
    while ($i < 10) {
        $i++;
        sleep(1);
    }
    return true;
}

public function actionT2() {
    // do nothing here at the moment...
    return true;
}

and

function a() {
    $.ajax({
        url: 't2'
    })
     .always(function() {
        console.log('t2 always');
        $('#tdiv').html(z);         // update DIV 
        z = z + 1;

        if (go1) {
            if (go2) {
                b();
                go2 = false;
            }
            setTimeout(function(){a();},200); // callback
        }
    });
};

function b() {
    $.ajax({
        url: 't1'
    })
    .done(function() {
        console.log('success');
        $('#tdiv').html('this works!'); // update DIV
    })
    .error(function(data) {
        console.log('fail');
        $('#tdiv').html(data.responseText); // update DIV
    })
    .always(function(){
        go1 = false;
    });
};

Upvotes: 1

Related Questions