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

按如下方式更改pollServer

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

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

2 个答案: