Javascript 查询ajax不允许我执行更多操作

我有一个仪表板，当用户登录时显示在主屏幕上

最初我有两个图形，一个是线，一个是条。问题是，图形查询有点繁重，加载大约需要30秒

我已经对查询进行了优化，它们有了一些改进，问题是当我想要访问系统的其他选项时，我并没有离开，因为我必须等待图形加载

用户很难等待图形加载，我想知道是否有一种方法可以访问其他系统选项，而不管加载的是什么图形

我的代码如下：

/*
* You get the urls that the user has access to in the dashboard. This is executed * when the user is on the main screen.
*/
  $.getJSON(getBaseUri() + 'dashboard/index', function(data) {

    var datas  = data['return'];

    if(datas == ""){
      $productivities.removeClass('chartID');
      $productions.removeClass('chartID');
      $combox.addClass('hidden');
    }

    for (var i in datas) {
      receiveData({
        div       : datas[i].div,
        title     : datas[i].privilege,
        sign      : datas[i].sign,
        iconClass : datas[i].class,
        id        : datas[i].id,
        label     : datas[i].label,
        xaxis     : datas[i].xaxis,
        yaxis     : datas[i].yaxis,
        background: datas[i].background,
        url       : datas[i].route,
        type      : datas[i].type
      });
    }
  });

/*
   * The function receiveData () receives the parameters of the dashboard that the user has access and brings the data of each url consulted, and according to the type of graph the function is executed.
   */
  function receiveData(param) {

    $.ajax({
      url: param.url,
      method: 'GET',
      dataType: 'json',
      success: function(data){
        var datas = data['return'];

        if(param.type === "LineChart"){
          lineChart({
            data : datas,
            div  : param.div,
            title: param.title,
            url  : param.url
          });
          $loaderProduction.addClass("hidden");
        }

        if (param.type === "BarChart") {
          barCharts({
            data      : datas,
            div       : param.div,
            title     : param.title,
            url       : param.url,
            label     : param.label,
            xaxis     : param.xaxis,
            yaxis     : param.yaxis,
            background: param.background
          });
          $loaderProductivity.addClass('hidden');
        }

        if (param.type === "Indicator") {
          indicatorsChart({
            data  : datas,
            div   : param.div,
            title : param.title,
            icon  : param.sign,
            class : param.iconClass,
            idDash: param.id
          });
        }

        if (param.type === "Sowing") {
          sowingIndicator({
            data  : datas,
            div   : param.div,
            title : param.title,
            idDash: param.id
          });
        }
      },
      error: function(error){
        console.log(error);
      }
    });
  }

基本上，这些是我用来显示仪表板图的函数

---

我认为在这种情况下，我需要使用WebWorkers，但我不知道如何使用它。现在，您正在为

for…in

循环的每次迭代调用AJAX。根据迭代次数的不同，这可能意味着巨大的开销，尽管在所有情况下最好减少到服务器的往返次数

您可以尝试修改前端和后端逻辑，将多个数据集合并到一个请求中，而不是每个请求和多个请求都有一个数据集

---

除此之外，您的代码中没有明显的瓶颈，因此，如果速度持续缓慢，则问题最有可能出现在后端代码上。

当然，您有一些选择：

• 浏览单页应用程序，即当用户浏览其他应用程序选项时，应用程序的执行始终保持在同一页。它可能很重，特别是当您的应用程序已经结构化时。Angular（或AngularJs）和其他前端框架一样，以自动化的方式为您实现这一点

• 让我们在一个iframe中执行加载js，既旧又脏，但它可以工作。在主页面中完成发送通知消息后

---

无论如何，您也应该优化代码，将调用数量从n（数据中每个元素一个）减少到1。

此图表中有多少数据点？有两个图表@jonmrich中有52个点，charts.js应该以毫秒为单位执行。我猜您的数据返回到AJAX的速度非常慢。你能检查一下吗？我知道查询有点重，在这个问题上，我请求帮助改进其中一个查询（）@jonmrich基于这个查询，我认为charts.js根本不是问题所在。您可能只需要添加一个加载图标，该图标在数据准备就绪时消失。我已经优化了代码，但我认为问题在于AJAX，我不知道用户是否有办法访问系统菜单选项，而不管加载的是哪种图形@我想我已经优化了后端的代码，但是我还需要请求加载graphs@Massimoso，尝试让js在全局页面中的iframe中执行