我在使用 JQuery UI 的工具提示功能的 JQuery DataTable 中有链接。每个链接都有一个由 Ajax 调用填充的工具提示。我想将 Ajax 调用的数量限制为尽可能少。DataTable使用服务器端处理,结果是分页的,所以任何时候页面上的链接永远不会超过十个。
Ajax 调用返回的数据永远不会改变,因此可以安全地缓存。在我的测试中,我看到浏览器确实缓存了每个 Ajax 调用的结果,因此它只对每个链接进行一次调用,然后使用缓存。我担心的是,某些用户可能将他们的浏览器配置为由于某种原因不使用缓存,并且每次将鼠标悬停在链接上时,他们都会一个接一个地触发 Ajax 调用。
这是工具提示的 JavaScript:
$('.jobId').tooltip({
content: function(callback) {
var jobId = $(this).text();
$.ajax({
url: 'myUrl',
data: {jobId: jobId},
dataType: 'json',
success: function(data) {
var html = formatResults(data);
callback(html);
},
error: function() {
callback('An error has occurred.');
}
});
}
});
我考虑将每个 Ajax 调用的结果存储在全局范围内声明的 JavaScript 对象中,然后在进行 Ajax 调用之前对其进行检查,但我有一种模糊的感觉,即这可能会以某种方式导致内存泄漏。
var gJobs = new Object();
$('.jobId').tooltip({
content: function(callback) {
var jobId = $(this).text();
if (gJobs[jobId]) {
callback(gJobs[jobId]);
} else {
$.ajax({
url: 'myUrl',
data: {jobId: jobId},
dataType: 'json',
success: function(data) {
var html = formatResults(data);
gJobs[jobId] = html;
callback(html);
},
error: function() {
callback('An error has occurred.');
}
});
}
}
});
我还担心如果表有大量行,gJobs 对象最终可能会使用大量内存。为了防止 gJobs 对象无限增长,每次用户转到 DataTable 中结果的下一页或上一页时,我使用 fnDrawCallback 函数重新初始化 gJobs:
$('#jobsTable').dataTable({
...
"fnDrawCallback": function() {
gJobs = new Object();
}
});
我应该提到,由于每个 Ajax 调用返回的数据不会改变,我也可以将数据作为静态文本存储在 JSP 中,并以这种方式填充工具提示,而不是使用 Ajax。但是,我必须进行单独的 Web 服务调用来获取每个链接的数据,而不是每次用户页面向前或向后调用十次 Web 服务,我宁愿通过 Ajax 按需加载数据。
这种方法有什么问题吗?有什么方法会导致内存泄漏?我应该在重新初始化之前明确删除 gJobs 的所有属性吗?谢谢你的帮助。