setInterval fires Ajax call twice every time

Question

I have the following JS code:

var delay = 5000;

function init() {
    setInterval(getFileCount, delay);
}

function getFileCount() {
    $.get('/notification/course-file-count', function(response) {
        if (response.items.length === 0) {
            return false;
        }

        // Do stuff with response
    });
}

On page load I'm calling the init() function. The idea is to start the interval and call the getFileCount() function every 5 seconds.

So, the interval waits 5s after the page loads and runs, but it always makes the Ajax call twice.

What am I missing?

UPDATE:

I know the init() function is triggered twice on page load (thanks to the comment by Yury Tarabanko). I don't quite understand, why. The almost-full code:

$(function() {
    'use strict';

    function handleCourseNotification() {

        var delay = 5000;

        function init() {
            setInterval(getFileCount, delay);
        }

        function getFileCount() {
            $.get('/notification/course-file-count', function(response) {
                if (response.items.length === 0) {
                    return false;
                }

                updateCourseList(response.items);
            });
        }

        function updateCourseList(items) {
            // update course list...
        }

        return {
            init: init
        };

    }

    if ($('#js-auth-course-list').length) {
        var notificationHandler = handleCourseNotification();
        notificationHandler.init();
    }

});

It's a small module, which I initialize after page load, if a specific element is available in the DOM - $('#js-auth-course-list'). Why is init called 2 times actually? I directly call it once.

Answer 1

In general, it is not a good idea to call asynchronous calls inside a setInterval() because you do not know the exact response time. So, you could end up calling the second async function before the response from the first call has returned.

You can try with setTimeout() like this:

var delay = 5000;
var async = function() {
   $.get('/notification/course-file-count', function(response) {
      if (response.items.length === 0) {
         return false;
      }
      // Do stuff with response

      // Call the async function again
      setTimeout(function() {
        async();
      }, delay);
   });
}

async();