Jquery ajax 不允许我做更多的动作

Question

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

最初我有两个图形，一个是线条，一个是条形。问题是图形查询有点重，加载大约需要 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，但我不知道如何使用它

Answer 1

现在，您正在为 for...in 循环的每次迭代进行 AJAX 调用。根据迭代次数，这可能意味着巨大的开销，尽管在所有情况下最好减少到服务器的往返次数。

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

除此之外，您的代码中没有明显的瓶颈，因此如果缓慢仍然存在，问题很可能与您的后端代码有关。

Answer 2

当然你有一些选择：

• 通过单页应用程序，即让您的应用程序在用户浏览其他应用程序选项时始终保持在同一页面中。它可能很重，特别是如果您的应用程序已经结构化。 Angular（或 AngularJs）与其他前端框架一样，以自动化的方式为您执行此操作。

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

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