jQuery - If browser tab is focused, then do AJAX - Not working

Question

I have a code that determines if current browser window or tab is active. If it's active, the title of the tab says "active" and if not it says "blurred"

It is working fine. Here's the code:

 $(window).on("blur focus", function (e) {
            var prevType = $(this).data("prevType");

            if (prevType != e.type) {   //  reduce double fire issues

                if (e.type == "blur") {
                    document.title = 'blurred';
                } else if (e.type = "focus") {
                  document.title = 'focus';
                }
            }

            $(this).data("prevType", e.type);
        })

The code above is working fine.

Now if I add AJAX to it, it doesn't work.

 $(window).on("blur focus", function (e) {
            var prevType = $(this).data("prevType");

            if (prevType != e.type) {   //  reduce double fire issues

                if (e.type == "blur") {
                    document.title = 'blurred';
                } else if (e.type = "focus") {

                    var interval = function () {
                        $.ajax({
                            url: "<?php echo base_url('home/get') ?>",
                            cache: false,
                            success: function (html) {
                                $("#text").val(html);
                                document.title ='focus';
                            },
                        });
                    };


                    setInterval(interval, <?php echo $int ?>);
                }
            }

            $(this).data("prevType", e.type);
        })

It says focused if it's in focus. If I go out of focus, it says "blurred" for less than a second, then says focus again. I don't know why. I want it to say blurred if it's not in focus. Adding the AJAX code doesn't make it work.

Please help. Thanks.

Answer 1

You need to use clearTimeout() in your blur event. My code continuously polls my server for data, but when I go out of the page, it stops polling. Please look at the implementation below. I have done the similar one in my application here :

$(window).blur(function() {
    clearTimeout(getJsonTmr);
    clearTimeout(updatePreviewTmr);
}).focus(StartTimers);

function StartTimers () {
    // Every half a second, 
    getJsonTmr = setInterval(function () {
        $.get("/doodles/update?getJson&DoodleID=" + DoodleOptions.DoodleID, function (data) {
            data = JSON.parse(data);
            if (!DoodleOptions.isActive)
                clearDoodleCanvas();
            $.each(data, function (index) {
                drawFromStream(data[index]);
            });
        });
    }, 500);

    updatePreviewTmr = setInterval(function () {
        $.post("/doodles/update?updatePreview", {
            "DoodleID": DoodleOptions.DoodleID,
            "DoodlePreview": canvas.toDataURL()
        });
    }, 5000);
}
StartTimers();

You can use the above code as reference and change yours.

A simple reference implementation for you...

function timers() {
  tmrAjax = setInterval(function () {
    $.get(/* ... */);
  }, 1000);
}

timers();

$(window).blur(function () {
  clearInterval(tmrAjax);
}).focus(timers);