Polling a server with jQuery and AJAX without initial delay

Question

Problem

Hi all, I am trying to refresh my table data on a set interval of 10 seconds... problem is that when I initially load the page there is a delay of 10 seconds before my table is shown...

Code

markup

<h2>Employee List</h2>
<!-- table -->
<table class="table table-striped table-hover table-responsive">
    <thead>
        <tr>
            <td>ID</td>
            <td>Emplyee Name</td>
            <td>Address</td>
            <td>Created at</td>
            <td>Action</td>
        </tr>
    </thead>

    <!-- table content dynamically generated by the javascript -->
    <tbody id="showdata"></tbody>
    <!-- end content -->

</table>
<!-- end table -->

jQuery

$(function(){


        pollServer();

        function pollServer(){

            window.setTimeout(function () {
                alert('hey');
                $.ajax({ // this is a json object inside the function
                    type: 'ajax',
                    url: '<?php echo base_url('employee/showAllEmployee'); ?>',
                    async: false,
                    dataType: 'json',
                    success: function(data){
                        console.log(data);
                        var html = '';
                        var i;
                        for(i = 0; i < data.length; i++){
                            html += '<tr>' +
                                        '<td>' + data[i].employee_id + '</td>' +
                                        '<td>' + data[i].employee_name + '</td>' +
                                        '<td>' + data[i].address + '</td>' +
                                        '<td>' + data[i].created_at + '</td>' +
                                        '<td>' +
                                            '<div class="pull-right">' +
                                                '<a class="btn btn-info btn-xs item-edit" href="javascript:;" data="' + data[i].employee_id + '">Edit</a>' +
                                                '<a class="btn btn-danger btn-xs item-delete" href="javascript:;" data="' + data[i].employee_id + '"><i class="fa fa-times"></i></a>' +
                                            '</div>' +
                                        '</td>' +
                                    '</tr>'
                        }
                        $('#showdata').html(html);
                    },
                    error: function(){
                        alert('Could not get Data from Database');

                    },
                    complete: function(){
                        pollServer();
                    }
                })
            }, 10000);
        }
    });

Question

How do I get my data on page load, and then ping the server every 10 seconds thereafter?

Answer 1

change pollServer as follows

function pollServer(){
    $.ajax({ // this is a json object inside the function
    // removed for clarity
        complete: function(){
            setTimeout(pollServer, 10000);
        }
    });
}