Subsequent ajax calls with delay

Question

var F = function() {
    $.ajax({
        .
        .
        .
    })
    .done(function() {
        console.log('Hey, I am done');
        setInterval(F, 10000);
    });
}

So I wanna update some stuff every 10 seconds. The problem is that everytime the ajax call is done calls itself double times. So the output is:

Hey, I am done //First call (without delay)

// After 10 seconds
Hey, I am done

// After 20 seconds
Hey, I am done
Hey, I am done

// After 30 seconds
Hey, I am done
Hey, I am done
Hey, I am done
Hey, I am done

And goes on... I am clearly missing something here! Can anyone enlighten me?

Answer 1

Don't use interval, use timeout:

setTimeout(F, 10000);

BTW, you should call it on complete, not success:

 .always(function() {
        setTimeout(F, 10000);
    });

Answer 2

It's because you have an interval that is creating a queue of requests to F that increases by 1 each time. Try setTimeout instead.

Answer 3

Just add on extra line of Code

    done(function() {
            console.log('Hey, I am done');
            clearInterval(F); // clear the interval F
            setInterval(F, 10000); //reset the interval F
        });