javascript - Asp MVC 应用程序逐渐变慢，因为 datatables.net 表在 ajax 成功时重新绘制

Question

我的 mvc 应用程序中有一个 View ，它利用 datatables.net 作为页面上的表。我有一个 ajax 调用来在一段时间后刷新页面的一部分，效果很好。让我感到困惑的部分是，随着时间的推移，它的响应速度变得越来越慢，并且变得无法运行，直到我完全重新加载页面。我发现延迟是由于 ajax 成功时调用表重绘造成的。我当前没有使用服务器端处理，而是使用 DOM 作为表的数据源。任何关于真正问题是什么以及如何解决它的想法将不胜感激。

主视图中通过ajax调用更新的部分:

<div id="issues-management">
    @Html.Partial("_IssuesManagement", Model)
</div>

主视图上的 JavaScript 函数:

$(document).ready(function () {
        $.ajaxSetup({ cache: false });
        setInterval(function () {

            $.ajax({
                url: "@Url.Action("Issues","Tier2")",
                type: 'GET',
                dataType: 'html',
                success: function(result)
                {
                    $('#issues-management').html(result);
                    //Redraw tables on page load
                    $('#pending-issues-table').DataTable().draw(false);
                    $('#inprogress-issues-table').DataTable().draw(false);
                    $('#followup-issues-table').DataTable().draw(false);
                }
            })


        }, 5000);

        //Global functions to initialize and draw table on initial page load
        initDataTableNet('#pending-issues-table', 1040, 480); 
        initDataTableNet('#inprogress-issues-table', 1040, 480);
        initDataTableNet('#followup-issues-table', 1040, 480);
 });

Answer 1

请测试一下并让我知道结果:

     var process;
     setInterval(function () {

        process = $.ajax({
            url: "@Url.Action("Issues","Tier2")",
            type: 'GET',
            dataType: 'html',
            success: function(result)
            {
                $('#issues-management').html(result);
                //Redraw tables on page load
                $('#pending-issues-table').DataTable().draw(false);
                $('#inprogress-issues-table').DataTable().draw(false);
                $('#followup-issues-table').DataTable().draw(false);
                process = null;
            }
        })


    }, 5000);