在@kalley的大量帮助下,我们发现如果我对以下两行进行注释,LAG就不见了!
var $tableContents = $table.find('tbody')
var $html = $('<tbody/>').html(data);
但是我如何保留以上内容但取消LAG
更多信息:下面的代码可以工作,但问题是$.GET
导致浏览器挂起,直到ajax请求完成。我需要(流控制?)或其他东西来解决这个问题,而无需锁定/挂起浏览器,直到ajax完成GET请求。
最大的LAG/Lockup/Hang是在$.get("updatetable.php"
,因为其他的只返回7个或更少的(数字)值,而这个('updatetable.php')返回的值更多(200-300kb)。我想在这里实现某种流控制,或者让脚本等待5秒,然后再触发tablesort的更新命令,然后再显示toast消息,这样ajax就有时间获取$.get("updatetable.php"
数据。我只是不明白为什么它在获取数据时会锁定浏览器?它是否试图触发其他命令,这就是导致LAG的原因?
以下是步骤
1.$.get("getlastupdate.php"
将每隔10秒左右触发一次,以检查日期和时间是否相同。返回数据如下:20130812092636
,格式为:YYYmmddHHmmss。
2.如果日期和时间与上一次GET不相同,则$.get("getlastupdate2.php"
将被触发,并且该数据将被发送回并放置在toast消息中并且被分配给用户$().toastmessage('showNoticeToast', Vinfoo
);
3.在上述($.get("getlastupdate2.php"
)之前或之后,将触发另一个GET:$.get('updatetable.php'
这将获取更新的表信息。并用新信息替换旧信息。然后更新/使用表
4.最后,我只想$.get("ajaxcontrol.php"
,如果用户登录,它将返回1或2,否则它将是2,它将破坏会话并将用户注销。
<script type="text/javascript" src="tablesorter/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="tablesorter/final/jquery.tablesorter.js"></script>
<script type="text/javascript" src="tablesorter/final/jquery.tablesorter.widgets.js"></script>
<script type="text/javascript" src="tablesorter/final/toastmessage/jquery.toastmessage-min.js"></script>
<script type="text/javascript" src="tablesorter/qtip/jquery.qtip.min.js"></script>
<script type="text/javascript">
var comper;
function checkSession() {
return $.get("ajaxcontrol.php", function (DblIn) {
console.log('checking for session');
if (DblIn == 1) {
window.location = 'loggedout.php';
}
}).then(updateTable);
}
function checkComper() {
var SvInfo;
var onResponse = function (comperNow) {
if (comper === undefined) {
comper = comperNow;
} else if (comper !== comperNow) {
var Vinfoo;
comper = comperNow;
// returning this $.get will make delay done until this is done.
return $.get("getlastupdate2.php", function (primaryAddType) {
Vinfoo = primaryAddType;
$().toastmessage('showNoticeToast', Vinfoo);
}).then(checkSession);
}
};
$.get('getlastupdate.php').then(onResponse).done(function () {
tid = setTimeout(checkComper, 2000);
});
}
function updateTable() {
return $.get('updatetable.php', function (data) {
console.log('update table');
var $table = $("table.tablesorter");
var $tableContents = $table.find('tbody')
var $html = $('<tbody/>').html(data);
$tableContents.replaceWith('<tbody>' + data + '</tbody>')
//$tableContents.replaceWith($html)
$table.trigger("update", [true]);
var currentUrl = document.getElementById("frmcontent").contentWindow.location.href;
var urls = ['indexTOM.php', 'index1.php'],
frame = document.getElementById('frmcontent').contentDocument;
for (var i = 0; i < urls.length; i++) {
var url = urls[i];
if (frame.location.href.indexOf(url) !== -1) {
frame.location.reload()
}
}
$('[title!=""]').qtip({});
});
};
$(function () {
var tid = setTimeout(checkComper, 2000);
$("#append").click(function (e) {
// We will assume this is a user action
e.preventDefault();
updateTable();
});
// call the tablesorter plugin
$("table.tablesorter").tablesorter({
theme: 'blue',
// hidden filter input/selects will resize the columns, so try to minimize the change
widthFixed: true,
// initialize zebra striping and filter widgets
widgets: ["saveSort", "zebra", "filter"],
headers: {
8: {
sorter: false,
filter: false
}
},
widgetOptions: {
filter_childRows: false,
filter_columnFilters: true,
filter_cssFilter: 'tablesorter-filter',
filter_filteredRow: 'filtered',
filter_formatter: null,
filter_functions: null,
filter_hideFilters: false, // true, (see note in the options section above)
filter_ignoreCase: true,
filter_liveSearch: true,
filter_reset: 'button.reset',
filter_searchDelay: 300,
filter_serversideFiltering: false,
filter_startsWith: false,
filter_useParsedData: false
}
});
// External search
$('button.search').click(function () {
var filters = [],
col = $(this).data('filter-column'), // zero-based index
txt = $(this).data('filter-text'); // text to add to filter
filters[col] = txt;
$.tablesorter.setFilters($('table.hasFilters'), filters, true); // new v2.9
return false;
});
});
</script>
也许您应该考虑切换到setTimeout
,而不是使用setInterval
。当时间重复时,它会让你有更多的控制权:
function checkComper() {
var SvInfo;
var onResponse = function (comperNow) {
if (comper === undefined) {
comper = comperNow;
} else if (comper !== comperNow) {
var Vinfoo;
comper = comperNow;
// returning this $.get will make delay done until this is done.
return $.get("getlastupdate2.php", function (primaryAddType) {
Vinfoo = primaryAddType;
$().toastmessage('showNoticeToast', Vinfoo);
}).then(checkSession);
}
};
$.get('getlastupdate.php').then(onResponse).done(function () {
tid = setTimeout(checkComper, 10000);
});
}
var tid = setTimeout(checkComper, 10000);
然后你可以保留它async: true
这是一个小提琴,展示了它使用echo.jsontest.com和一些伪造的数字工作。
由于click
事件回调似乎是问题所在,请尝试这样做,看看它是否消除了滞后(我删除了其他注释以使其更简短):
function checkSession() {
return $.get("ajaxcontrol.php", function (DblIn) {
console.log('checking for session');
if (DblIn == 1) {
window.location = 'loggedout.php';
}
}).then(updateTable);
}
function updateTable() {
return $.get('updatetable.php', function (data) {
console.log('update table');
var $tableContents = $table.find('tbody')
//var $html = $('<tbody/>').html(data);
//$tableContents.replaceWith($html);
// replaceWith text seems to be much faster:
// http://jsperf.com/jquery-html-vs-replacewith/4
$tableContents.replaceWith('<tbody'> + data + '</tbody>');
//$table.trigger("update", [true]);
var currentUrl = document.getElementById("frmcontent").contentWindow.location.href;
var urls = ['indexTOM.php', 'index1.php'],
frame = document.getElementById('frmcontent').contentDocument;
for (var i = 0; i < urls.length; i++) {
var url = urls[i];
if (frame.location.href.indexOf(url) !== -1) {
frame.location.reload()
}
}
$('[title!=""]').qtip({});
});
};
$("#append").click(function (e) {
// We will assume this is a user action
e.preventDefault();
updateTable();
});
我注释掉了$table.trigger("update", [true])
,因为如果在返回之前对服务器上的表进行排序,就不需要运行它,我几乎可以肯定这就是瓶颈所在
很难解决您所面临的混乱,但如果您想要的是每10秒发出一次ajax请求,那么通过服务器上的数据将此逻辑与业务逻辑分离是有意义的。
您的代码也将真正受益于使用promise。考虑这个例子
$(document).ready(function() {
var myData = { }
, ajaxPromise = null
setInterval(callServer, 1000)
function callServer() {
ajaxPromise = updateCall()
.then(controlCall)
.done(handler)
.error(errorHandler)
}
function updateCall() {
return $.get('updateTable.php', function(data) {
myData.update = data
})
}
function controlCall( ) {
return $.get('ajaxControl.php', function(data) {
myData.control = data
})
}
function handler() {
console.dir(myData)
}
function errorHandler(err) {
console.log(err)
console.dir(myData)
}
})