1

我在使用 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 的所有属性吗？谢谢你的帮助。

4

0 回答 0