restarting setInterval inside the method used by it

Question

I have a setInterval running which checks for existence of an element with a certain class. If it finds it then it binds the click event to that element and clears the interval.

Inside this click event I want to restart the same setInterval again. This I am not able to achieve.

I have tried this code but it doesnt restart the setInterval

outside document.ready (global)

 var interval;

 var onInterval;

inside document.ready

onInterval = function () {
    //check if an element with this class exists
    if ($('.lpInviteChatHrefClose').length) {
        $(".lpInviteChatHrefClose").click(function () {
            outbound_reject_omniture_setting(this);
            //This should restart the interval but it doesnt
            //Also tried the following but in vain
            //clearInterval(interval);
            //delete window.interval;
            //delete interval;
            //interval = null;
            interval = setInterval(onInterval, 1000);
        });
        clearInterval(interval);
    }
};

interval = setInterval(onInterval, 1000);

Also I have tried the following but it is also not working. It is not binding the first click itself I dont know why. There is no error in the console.

$(document).on('click', '.lpInviteChatHrefClose', function(){
    // your code here...
});

Please help!

Thanks in advance.

Answer 1

I was able to achieve this.

The problem was that the setInterval was getting restarted (an observation mistake you can say) but it was getting bound immediately to an earlier element which was created dynamically hence new element which was getting added after certain period of time was not getting bound.

Also I forgot to mention that the method which was getting called i.e. outbound_reject_omniture_setting was doing some work and then the parent of that element was getting hidden, so I was not able to check if the click is getting bound to the same element.

The solution was to loop through all the elements that are added till now and check if its parent is visible. If yes then bound the click event to the element and clear the interval. Within the click function, restart the interval.

onInterval = function () {
    $('.lpInviteChatHrefClose').each(function (index) {
        if ($(this).parent().css('visibility') == 'visible') {
            $(this).click(function () {
                outbound_reject_omniture_setting(this);
                interval = setInterval(onInterval, 1000);
            });
            clearInterval(interval);
        }

    })
};

interval = setInterval(onInterval, 1000);

Thank you everyone for your help.

Answer 2

Your Code is correct.

The only reason why it doesn't work is the typical 'Oh no, i didn't use .on() event binding'.

Try this one:

onInterval = function () {
    //check if an element with this class exists
    if ($('.lpInviteChatHrefClose').length) {
        $(document).on('click','.lpInviteChatHrefClose',function () {
            outbound_reject_omniture_setting(this);
            //This should restart the interval but it doesnt
            //Also tried the following but in vain
            //clearInterval(interval);
            //delete window.interval;
            //delete interval;
            //interval = null;
            interval = setInterval(onInterval, 1000);
        });
        clearInterval(interval);
    }
};

interval = setInterval(onInterval, 1000);

For future reference, please use '.on()' event binding. Proper Explanation to this jQuery practice

Answer 3

EDIT after comment :

Please see the JsFiddle

I add a link dynamically in the fiddle to match the requirements. I checked that length is ==1 and kill the interval.

var interval;
var onInterval;

$(function() {
    onInterval = function () {
        if ($('.lpInviteChatHrefClose').length===1) {
            $(".lpInviteChatHrefClose").click(function () {
                //Do something on click
                clearInterval(interval);
            });
            console.log("interval cleared");
            clearInterval(interval);
        }
        console.log("interval runs");
    };

    interval = setInterval(onInterval, 1000);

})