Question

在数据驱动的Web应用程序中，我有几个剃刀视图，其中包含使用tabulator创建的表，并使用间隔自动调用ajax函数对其进行更新。在大多数视图中，表的数量不超过三个，并且网络性能和更新之间的间隔相当快。我目前正在创建一个包含六个表的视图，并且看到丢弃的请求增加，数据停滞以及总体缓慢，这似乎直接归因于页面上并发请求数量的增加。我绝不是JavaScript或MVC专家，而是试图调查我的代码是否效率低下，或者方法本身是否错误。

基本上，每个制表器表都有一个Ajax函数，该函数将在MVC层命中一个端点，该端点路由到WebApi2端点以检索最新数据，最后，使用其中一个制表器加载函数将数据加载到表中。数据端是使用实体框架的SQL。我已经尝试过围绕此过程构建的几种实现，但是下面是我当前正在使用的方法。

    // Function for waiting in between calls
    function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
    // Function for getting data from endpoint
    async function fetch() {
        $.ajax({
            type: "GET",
            url: www.mydata.com,
        }).done(async function (data) {
            // Tabulator function for replacing existing data with new
            table.replaceData(data);
            await sleep(10000);
            fetch();
            }).fail(async function () {
                await sleep(10000);
                fetch();
        })
    }
    // Call the fetch function the first time, self calls afterwards
    fetch();

视图中的每个表都运行上述代码片段的一个版本。我添加了睡眠功能，希望在请求之间引入一些延迟。还值得指出的是，在ASP.NET MVC层，拥塞也有所增加。由于所有其他请求来回飞行，因此用户创建新实体的请求所需的服务时间更长。

Answer 1

要向服务器传播请求，您可以选择更改表的配置方式。

假设当前您正在使用 ajaxURL 属性设置表url，这将导致表在加载时发出请求。

var table = new Tabulator("#example-table", {
    ajaxURL:"http://www.getmydata.com/now", //ajax URL
});

这将导致所有六个表同时发出请求。

您可以采用几种不同的方法

延迟请求

您可以改为将此字段保留在表定义之外（导致其在加载时具有空表，然后稍后使用 setData 函数加载数据）。您可以将其包装在setTimeout函数中：

//wait one second before loading data
setTimeout(function(){
    table.setData("http://www.getmydata.com/now");
}, 1000);

如果为每个表设置不同的超时时间，它们将以交错方式加载。

捆绑请求

您可以在向服务器检索所有数据的单个ajax请求中自己检索数据，而不是允许这些表检索其数据，然后使用 setData < / strong> 功能。

尽管如果要加载大量数据，这可能会导致延迟。

渐进式加载

如果您尝试传输大量数据，那肯定会减慢请求的速度。

在这种情况下，使用制表器的 ajaxProgressiveLoad 功能可让您分页将数据分页并一小块一小块地发送到表中，这不会造成麻烦您的服务器持续了这么长时间：

var table = new Tabulator("#example-table", { ajaxURL:"http://www.getmydata.com/now", //ajax URL ajaxProgressiveLoad:"load", //sequentially load all data into the table });

有关此选项的更多详细信息，请参见Progressive Ajax Loading Documentation

在一个视图/页面中实现多个并发Ajax请求的最佳方法是什么？

1 个答案:

延迟请求

捆绑请求

渐进式加载