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.

Can you explain "It is not binding the first click itself I dont know why"? — Adil, May 07 '14 at 05:46
I tried alert inside this code but it is not showing the message. — samar, May 07 '14 at 05:49
yes they are. In fact the setinterval code is also working fine for the first time. Just that it is not working for subsequent elements that are getting dynamically added to the page. And both the above code are on the same page. — samar, May 07 '14 at 05:52
setInterval must the be used for this purpose. Your second method is much better solution. Can you make a demo on http://jsfiddle.net/ — Adil, May 07 '14 at 05:53
Yes i know it is a better solution but somehow it is not working at all. I dont see a point in making a demo on the fiddle here. — samar, May 07 '14 at 05:56

Yooz · Answer 1 · 2014-05-07T06:50:03.413

0

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);

})

edited May 07 '14 at 06:50

answered May 07 '14 at 05:57

Yooz

2,506
21
31

I am creating the trigger in interval function because the element is getting added to the page dynamically at any point when the page loads completely. Consider this as a request from a customer support to a client. jquery will not find this element on document.ready. – samar May 07 '14 at 06:02
If you remove the length condition then the function will get called multiple times as many anonymous functions will get attached to the click event every second once the element appears on the page. I just want to call the function once on click of the element. – samar May 07 '14 at 06:16
Just to understand what you'r after : An interval is running a document.load, then @time n the button with the class is added to the DOM, the next interval detects the button, trigger the click and stop the interval? is that correct? – Yooz May 07 '14 at 06:27
That is absolutely correct. But going ahead, a new element with the class can get added to the same dom. I want to attach the click event to that element as well. This i am not able to achieve as the interval is not restarting. I hope you are getting my problem here. – samar May 07 '14 at 06:36

score 0 · Answer 2 · edited May 23 '17 at 12:20

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

score 0 · Accepted Answer · answered May 14 '14 at 09:15

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.

restarting setInterval inside the method used by it

3 Answers3