Query ajax does not allow me to do more actions

Question

I have a dashboard that is displayed on the main screen when the user logs on.

Initially I have two graphics, one of lines and one of bars. The problem is that the graphical queries are a bit heavy and take about 30 seconds to load.

I already did optimization of the queries and they improved a little, the problem is that when wanting to access other options of the system does not leave me, because I have to wait until the graphs are loaded.

It is difficult for the user to wait until the graphs load, I would like to know if there is a way that other system options can be accessed, regardless of the graphs being loaded.

The code I have is the following:

/*
* 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);
      }
    });
  }

Basically these are the functions I'm using to display dashboard graphs.

I think that this case I need to use WebWorkers, but I don´t know how to use it

Answer 1

Right now you're making an AJAX call for every iteration of your for...in loop. Depending on the number of iterations this could mean a huge overhead, although it is best to reduce the number of round trips to the server in all cases.

You could try to modify both the front- and backend logic to combine multiple datasets into one request instead of one dataset per request and multiple requests.

Other than this there are no obvious bottlenecks in your code, so if the slowness persists the problem is most likely with your backend code.

Answer 2

Of course you got some options:

• go through a Single Page Application, i.e. make your app in the way that, when user navigate other application options, the execution remains always in the same page. It may be heavy, exspecially if your application is already structured. Angular (or AngularJs), as other frontend frameworks, do this for you in an automated way.

• let execute your loading js in an iframe, old and dirty but it works. When finished send a notification message in the main page,

Anyway you should optimize your code too, reducing number of calls from n (one for each element in datas) to 1.