1

JQuery UI のツールチップ機能を使用する JQuery DataTable にリンクがあります。各リンクには、Ajax 呼び出しによって入力されるツールヒントがあります。Ajax 呼び出しの数をできるだけ少なくしたいと考えています。DataTable はサーバー側の処理を使用し、結果はページ分割されるため、一度にページに 10 個を超えるリンクが存在することはありません。

Ajax 呼び出しによって返されるデータは変更されないため、安全にキャッシュできます。私のテストでは、ブラウザーが各 Ajax 呼び出しの結果をキャッシュし、リンクごとに 1 つの呼び出しのみを行い、その後キャッシュを使用することを確認しました。私の懸念は、なんらかの理由でキャッシュを使用しないようにブラウザーを構成しているユーザーがいて、リンクにマウスを合わせるたびに、次々と 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 呼び出しによって返されるデータは変更されないため、Ajax を使用する代わりに、JSP にデータを静的テキストとして保存し、その方法でツールヒントを設定することもできます。ただし、各リンクのデータを取得するために個別の Web サービス呼び出しを行う必要があり、ユーザーがページを前後に移動するたびに 10 回の Web サービス呼び出しを行うよりも、Ajax を介してオンデマンドでデータをロードしたいと考えています。

このアプローチに問題はありますか？これによりメモリリークが発生する可能性はありますか? 再初期化する前に、gJobs のすべてのプロパティを明示的に削除する必要がありますか? ご協力いただきありがとうございます。

4

0 に答える 0