在没有初始延迟的情况下使用 jQuery 和 AJAX 轮询服务器
Polling a server with jQuery and AJAX without initial delay
问题
大家好,我正在尝试以 10 秒的设置间隔刷新我的 table 数据...问题是,当我最初加载页面时,在 [=] 之前有 10 秒的延迟显示 35=]...
代码
标记
<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 服务器一次?
更改 pollServer 如下
function pollServer(){
$.ajax({ // this is a json object inside the function
// removed for clarity
complete: function(){
setTimeout(pollServer, 10000);
}
});
}
只需在超时成功回调中调用相同的函数即可。
function pollServer() {
$.ajax({
...
success: function(data) {
setTimeout(function() {
pollServer();
},10000);
}
});
}
// Call the function on load
pollServer();
问题
大家好,我正在尝试以 10 秒的设置间隔刷新我的 table 数据...问题是,当我最初加载页面时,在 [=] 之前有 10 秒的延迟显示 35=]...
代码
标记
<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 服务器一次?
更改 pollServer 如下
function pollServer(){
$.ajax({ // this is a json object inside the function
// removed for clarity
complete: function(){
setTimeout(pollServer, 10000);
}
});
}
只需在超时成功回调中调用相同的函数即可。
function pollServer() {
$.ajax({
...
success: function(data) {
setTimeout(function() {
pollServer();
},10000);
}
});
}
// Call the function on load
pollServer();