In jQuery how to wait for specific value on variable

Question

I have an variable

var IsAjaxing;

I set it to true everytime a ajax is fired on the page. And then set it to false when ajax is finished;

I am building a SafeAjaxing event so work would only be done when the page is not ajaxing:

    // safe-ajaxing: Triggers when no ajax is running
    $($fieldRenderPageDOM).on("safe-ajaxing", '.field-render', function(e, work) {
        $.when({ IsAjaxing: false }).done(work);
    });

This doesn't seem to wait, work is always called immediately.

It would be called like this:

$fieldDOM.trigger("safe-ajaxing", function () {
    $fieldDOM.trigger("do-work");
    $fieldDOM.trigger("do-some-more-work);
});

Possible duplicate of [In javascript, how to trigger event when a variable's value is changed?](http://stackoverflow.com/questions/10638769/in-javascript-how-to-trigger-event-when-a-variables-value-is-changed) — Fabian Schultz, Nov 17 '16 at 21:24
Don't wait for values to appear in variables. Instead, just wait for the data directly. — Bergi, Nov 23 '16 at 19:53
Can't. Design is event driven, don't have access to the direct Ajax call. — Bill Software Engineer, Nov 23 '16 at 19:56

score 1 · Accepted Answer · edited Nov 23 '16 at 19:18

You should use promises for this purpose:

var IsAjaxing = function(){
    var defer = $.Deferred().resolve();

    return {
        On: function(){
            defer = $.Deferred();
        },
        Off: function(){
            defer.resolve();
        },
        Promise: function() {
            return defer.promise();
        },
        IsOn: function() {
            return defer.state() == "pending";
        },
        IsOff: function() {
            return defer.state() != "pending";
        }
    };
}();

And then your event will be:

// safe-ajaxing: Triggers when no ajax is running
$($fieldRenderPageDOM).on("safe-ajaxing", '.field-render', function(e, work) {
    $.when(IsAjaxing.Promise()).done(work);
});

Each time when you start ajax request run:

IsAjaxing.On();

Each time when you finish ajax run:

IsAjaxing.Off();

To check the current state of IsAjaxing, call the IsOn and IsOff function.

How do I tell what state IsAjaxing is at? Specifically how do I tell if it's ajaxing or not? — Bill Software Engineer, Nov 23 '16 at 17:51

score 0 · Answer 2 · answered Nov 17 '16 at 21:29

This might not be the best way, but it works.

You really should optimize the code i've written, but this is to get you started.

var isAjaxing = false;

var check = function(){
  if(isAjaxing){
    // do something
    alert();

    // freeze the checking
    // manual restart is required
    clearInterval(interval);
  }
}

var interval = setInterval(check, 10);

// to demonstrate the variable change
setInterval(function(){
  isAjaxing = true;
}, 3000);

This scripts checks if the variable is changed every 10 miliseconds.

Note: The clearInterval() function is used to stop checking.

score 0 · Answer 3 · answered Nov 23 '16 at 19:57

I am building a SafeAjaxing event so work would only be done when the page is not ajaxing.

Don't build this yourself. Just use the builtin ajax events of jQuery, namely

ajaxStart "This event is triggered if an Ajax request is started and no other Ajax requests are currently running."
ajaxStop "This global event is triggered if there are no more Ajax requests being processed."

In jQuery how to wait for specific value on variable

3 Answers3