How to clearInterval() in this code

Question

I'm trying to make a wall post like Facebook. I need to refresh the content div after every ten seconds and the div shouldn't refresh while the user is typing a comment. The content is reloading but is not stopping. Actually, I want to stop it when i click id = 'comments_option'.

I tried this and called the function reload(uid) at $(document).ready

var intervalId = null;

function reload(uid) {
    intervalId = setInterval(function () {
        var ol = $('#home_list');
        var start = ol.children().length;

        $.post('ajax/reloadhome.php', {
            uid: uid,
            start: start
        }, function (data) {
            $('#buzzfetch ul').html(data);
        });
    }, 5000);


    $('#comments_option').click(function () {

        clearInterval(intervalId);

    });
}

as i mentioned ... it is reloading again and again .. i want to stop it when user click #comments_option — webzar, Aug 21 '12 at 19:12
Is `var intervalId` defined _inside_ or _outside_ `$(document).ready()`? — Michael Berkowski, Aug 21 '12 at 19:13
It should be correct as is, but I'd declare "var intervalId" directly in the "reload" function. — Matteo Tassinari, Aug 21 '12 at 19:13
is `#comments_option` inside of `#buzzfetch ul`? If so, you will have to bind your click event every time it is replaced. — lbstr, Aug 21 '12 at 19:14
@lbstr made good point. your script is working fine http://jsfiddle.net/m5UW7/ — Peter, Aug 21 '12 at 19:17
@user1615099 are you sure `reload(uid)` is used only one time? make some debug `function reload(uid) { alert('fire!'); ... ` — Peter, Aug 21 '12 at 19:18

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

0

Use on as opposed to click:

$("#comments_option").on("click", function () {
    clearInterval(intervalId)
});

Because #comments_option is inside of #buzzfetch ul, the click event will only be bound to the first instance of #comments_option when using click. It will not bind to any further instances.

See this answer for further explanation on the differences between bind and on

edited May 23 '17 at 12:12

Community

1
1

answered Aug 21 '12 at 19:19

Austin

6,026
2
24
24

thats not really how it works. if `#comments_option` is replaced, the click event won't fire. You would need `$('#buzzfetch').on('click', '#comments_option', function(){...});` provided that `#buzzfetch` won't be replaced and `#comments_option` is a decendant of `#buzzfetch`. Please correct me if I'm wrong. – lbstr Aug 21 '12 at 22:48
Just to be sure, I made a fiddle that demonstrates the point: http://jsfiddle.net/lbstr/QRNhw/ – lbstr Aug 21 '12 at 22:50

How to clearInterval() in this code

1 Answers1