Question

我在JQuery DataTable中有链接，它使用JQuery UI的工具提示功能。每个链接都有一个由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的所有属性吗？谢谢你的帮助。

重新初始化全局范围内的JavaScript对象会导致内存泄漏吗？

0 个答案: