How to recursively call a function 1 second after an ajax request is done?

Question

I have a case where I do not want to call a method every second. Rather, I want to call a function 1 second after the ajax request is completed regardless of the result.

I tried to use the $.delay() function but it gives me an error

TypeError: $.delay is not a function

Here is my code

$(function(){
    function checkMessages(){

        $.ajax({
            type: 'GET',
            url: icwsHandlerUrl,        
            data: {method: 'getMessages', jSON: true},
            dataType: 'json',
            cache: false,
            timeout: 5000,
            success: function(data) {
                console.log(data); // for testing only but this should call a handler for the data  
            },
            complete: function(){
                $.delay(1000, function(){
                    checkMessages();
                });
            }
        });

    }

    $(window).load(function(){
        checkMessages();
    });
});

Note: I am using jQuery version 2.1.0

Answer 1

$.delay is used to delay events which are stored in jQuery's event queue. For this you should use JavaScript's own setTimeout method instead:

setTimeout(checkMessages, 1000);

Answer 2

Try chaining all of this like this:

$(function(){
    function checkMessages(){

        $.ajax({
            type: 'GET',
            url: icwsHandlerUrl,        
            data: {method: 'getMessages', jSON: true},
            dataType: 'json',
            cache: false,
            timeout: 5000,
            success: function(data) {
                console.log(data); // for testing only but this should call a handler for the data  
            },
            complete: function(){
                $.delay(1000, function(){
                    checkMessages();
                });
            }
        });

    }

    $(window).load(function(){
        checkMessages();
    });
});

into this:

var req = $.ajax({
                type: 'GET',
                url: icwsHandlerUrl,        
                data: {method: 'getMessages', jSON: true},
                dataType: 'json',
                cache: false,
                timeout: 5000,
                success: function(data) {
                    console.log(data); // for testing only but this should call a handler for the data  
                },
                complete: function(){
                    $.delay(1000, function(){
                        checkMessages();
                    });
                }
            });

var nextTask = req.then(function(data){something});
nextTask.done(function(data){somethingelse});

the above code will wait everything to be done to do the next task. Try it out.

Make sure you remove the $.delay() and put it into the req.then() function.

Here is the .then() explanation https://api.jquery.com/deferred.then/

EDIT:

$(window).load(function{
     $.delay(1000, function(){
         checkMessages();
     });
});

and place check messages outside of this piece of code.

Answer 3

The previous answers contain all the essential bits, but here's a complete solution:

$(function(){
    var checkMessagesTimeout;

    function checkMessages(){

        $.ajax({
            type: 'GET',
            url: icwsHandlerUrl,        
            data: {method: 'getMessages', jSON: true},
            dataType: 'json',
            cache: false,
            timeout: 5000,
            success: function(data) {
                console.log(data); // for testing only but this should call a handler for the data  
            },
            complete: function(){
                checkMessagesTimeout = setTimeout(function(){
                    checkMessages();
                }, 1000);
            }
        });

    }

    $(window).load(function(){
        checkMessages();
    });
});

This version has the added benefit of storing the timeout's reference into a variable, so should the need arise, you can abort the timeout before the next ajax call is made, by calling clearTimeout(checkMessagesTimeout);