JavaScript setInterval inside bind

Question

I am trying to make an infinite periodic get loop:

<script type=text/javascript>
    $(function() {
        $('a#log').bind('click', setInterval(function() {
            $.get(
                $LOG + '/json_test',
                {},
                function(data) {
                    document.getElementById("logs").innerHTML = data.replace('\n', '<br/>');
                }
            );
         }, 2000));
  });
</script>

If I do this

<script type=text/javascript>
    $(function() {
        $('a#log').bind('click', function() {
            $.get(
                $LOG + '/json_test',
                {},
                function(data) {
                    document.getElementById("logs").innerHTML = data.replace('\n', '<br/>');
                }
            );
         });
  });
</script>

All works well, but without infinite loop.

Answer 1

As @sacho say, setInterval() returns a Number. You are binding that number as your click handler instead a function. That's why is not working, but...

You can do something like this is just want to call the ajax function every time is finished, you can't be sure that your response will be every 2000ms.

$('a#log').click(function (e) {
    e.preventDefault();
    infiniteLoop();
})


function infiniteLoop() {
    $.get(
        $LOG + '/json_test',
        {},
        function(data) {
            $("#logs").html(data.replace('\n', '<br/>'));
            infiniteLoop();
        }
    );
}

Note: Use jQuery (specially to manage the DOM) every time you can if you already loaded the library

Answer 2

You need wrap your setInterval function in a intermediate function to prevent it from executed before your click. In other word, a function inside a function.

$(function () {
    $('a#log').bind('click', function () {
        setInterval(function () {

            $.get('example.json',{}, function (data) {

                $('#logs').html(JSON.stringify(data).replace('\n', '</br>'));
            });

        }, 2000);
    });
});

JSfiddle Working Demo: http://jsfiddle.net/x13sruaf/

Answer 3

$('a#log').on('click', infiniteLoop);
function infiniteLoop() {
    setInterval(function() {

    }, 2000);
}

Answer 4

You can try this :

<script type=text/javascript>
    $(function() {
        var refreshIntervalId;
        $('a#log').bind('click', function (){
            clearInterval(refreshIntervalId);
            refreshIntervalId = setInterval(function() {
                $.get(
                    $LOG + '/json_test',
                    {},
                    function(data) {
                        document.getElementById("logs").innerHTML = data.replace('\n', '<br/>');
                    }
                );
             }, 2000);
       });
    });
</script>