使用 jQuery 和 AJAX 轮询服务器，没有初始延迟

Question

>问题

大家好，我正在尝试以 10 秒的设定间隔刷新我的表数据......问题是当我最初加载页面时，在显示我的表格之前有 10 秒的延迟......

法典

标记

<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);
        }
    });

问题

如何在页面加载时获取数据，然后每 10 秒 ping 一次服务器？

Answer 1

更改轮询服务器，如下所示

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

Answer 2

只需在

成功回调中调用相同的函数，并超时。

function pollServer() {
   $.ajax({
      ...
      success: function(data) {
         setTimeout(function() {
            pollServer();
         },10000);
      }
   });
}
// Call the function on load
pollServer();