CODEWITHSUNDEEP
javascriptjquery
Suic
Suic

Reputation: 2501

unbind event handlers while ajax in progress

I have a text field with keypress event handler jsfiddle. And when I type something in this field and press "Enter" 2 times, 2 requests will be send. I want to turn off all events, while ajax request in progress. One option is to call .off() function before ajax call, and then bind event handler again. Any other options?

Upvotes: 0

Views: 170

Answers (3)

Nunners
Nunners

Reputation: 3047

Is there a good reason for you not to use the jQuery .off() function?

If so then you could simply disable the control prior to making the ajax request and re-enable it once the request is complete. This would also stop the user from thinking he/she could change the result by changing the text value during the request.

        //Disable the input        
        $('#myresult').prop('disabled', true);
        $('#myresult').append('<br>'+$(this).val());
        $.ajax({
            type: "POST",
            beforeSend: function() {},
            complete: function() {
                //Re-Enable the input
                $('#myresult').prop('disabled', false);
            },
            url: "/echo/json/",
            data: { delay : 3 },
            success: function(){},
            error: function() {},
            dataType: 'json'
        });

Upvotes: 1

kasper Taeymans
kasper Taeymans

Reputation: 7026

use the callback handlers from your ajax call and a boolean used as flag. By setting the ajaxLoading boolean to false in the "always" callback, you can be sure that other, future requests can be made independent from whether the current ajax call throws an error or not. 

var ajaxLoading = false;

if(!ajaxloading){
   ajaxloading=true;
   $.ajax({
    url: 'your url',
    type: 'GET',
    dataType: 'JSON'

   })
   .done(function(data) {
    console.log("success");

   })
   .fail(function() {
    console.log("error");
   })
   .always(function() {
    console.log("complete");
        ajaxloading=false;
   });

}

Upvotes: 2

Halcyon
Halcyon

Reputation: 57728

I use 2 boolean flags, like:

var is_requesting = false, should_request = false;
function onkeydown() {
    if (is_requesting) {
        should_request = true;
        return;
    }
    is_requesting = true;
    $.ajax({}, function () {
        is_requesting = false;
        if (should_request) {
            onkeydown();
        }
    });
}

Upvotes: 1

Related Questions