4

Olá. Indo direto ao ponto: supondo que eu tenha uma função com estruturas de repetições que, dependendo do que o usuário preencha, o processo existente nessa função possa demorar um certo tempo, e enquanto ela não seja totalmente finalizada, a página fique travada. Existe algum recurso a que eu possa recorrer, para que, ao invés de a página travar, esse carregamento possa acontecer "internamente", e enquanto isso a página funcione normalmente?

Por exemplo: https://jsfiddle.net/SamirChaves/d2red81z/

Na situação acima, há uma criação automática de uma tabela, a partir da ordem (n x m), indicada pelo usuário. Mas, caso o usuário escolha 100 x 100, por exemplo, o sistema criará a tabela, contudo, demandará um tempo de carregamento um tanto quanto extenso, e enquanto isso a página permanecerá travada. Preciso de alguma maneira que isso não aconteça, que no decorrer do processo de criação da tabela, a página continue funcionando normalmente e, por exemplo, um gif load apareça até a total finalização.

Essa é uma dúvida que já persiste há um certo tempo, mas não encontrei nada a respeito, ou não soube procurar. Caso alguém possa me ajudar, desde já, agradeço.

9
  • Por acaso você teria um exemplo onde acontece isso? Commented 15/11/2015 às 0:32
  • 1
    Irei editar o comentário com um exemplo prático. Commented 15/11/2015 às 0:38
  • Pegunta editada! Commented 15/11/2015 às 0:51
  • 1
    Eu não sei muito sobre o assunto, então não vou tornar isso uma resposta (alguém pode fazer isso!), mas provavelmente sua solução são os Web Workers. São como threads, mas com algumas restrições. Documentação no MDN (em inglês): developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/… Commented 15/11/2015 às 1:39
  • 1
    Podes recorrer ao servidor para te fazer esse cálculo e retornar HTML?
    – Sergio
    Commented 15/11/2015 às 8:32

1 Resposta 1

3

Vamos lá...

Teu código possui algumas má práticas. Porém vou me ater a principal. Sempre que for trabalhar com js e manipulação em massa de dados evite fazer muitos acessos ao DOM. Vou citar um exemplo:

document.getElementByQualquerCoisa().innerHTML = 'Algo';

Sempre que você faz isso um bebe foca morre na antartica

E porque isso acontece?

Porque sempre que um acesso ao DOM é feito o browser precisa percorer TODA a estrutura para achar o dito elemento que está procurando. Isso Mata o navegador. Ex.:

<div>
    <table>
        <tr>
            <td><input type="text" id="ipTeste"/></td>
        </tr>
    </table>
</div>

Nesse exemplo para chegar até o ipTeste será necessário:

Acessar div -> table -> tr -> td -> input

Parece pouca coisa? Sim realmente é! Porém não se esqueça que no teu caso terás uma mega estrutura. Nesse caso a performance será sentida de longe.

Outra coisa, no caso de você buscar uma tabela então é pior ainda, pois além de ter que passar pelo DOM você terá muitas informações que provavelmente não precisará. Outra coisa, informações como style, class e etc também são retornados, ou seja todos os atributos.

Então o que fazer?

Parece obvio e é. Evite acesso ao DOM em casos como o seu procure usar um framework que abstrai esse tipo de comportamento. Vou citar um que uso e consigo um dos melhores: https://angularjs.org/

Segue abaixo exemplo do teu programa usando angular:

var app = angular.module('App', []);
app.controller('AppController', function($scope){
    $scope.column = 5;
    $scope.row = 5;
    
    $scope.range = function(count){
        var ratings = []; 
        for (var i = 0; i < count; i++) { 
            ratings.push(1) 
        } 
        return ratings;
    }   
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App" ng-controller="AppController">
    <form id="create_table" action="javascript:process()">
        <input type="text" id="column" ng-model="column"> x <input type="text" id="row" ng-model="row"> 
        <input type="submit" value="Criar Matriz">
    </form>
   <div>
        <table class="tg">
            <tr ng-repeat="r in range(row) track by $index">
                <td ng-repeat="c in range(column) track by $index">
                    <input type="text" class="cells" style="width: 12px;" value="1"/>
                </td>
            </tr>
        </table>
    </div>
</div>

E com js puro. Usei um time out para não travar o navegador:

function ps(n) {
  return parseFloat(n);
}

var MTZ = document.getElementsByClassName("tg");
var statusInProcess = false;

function createTable() {
  
  rows = document.getElementById("row");
  columns = document.getElementById("column");

  var N = 0;
  var Column = [];
  var Row = [];

  var table = document.createElement('table');
  table.setAttribute('class', 'tg');

  for (var g = 0; g < columns.value; g++) {
    var fnAsync = function(g) {
      Row.push(table.insertRow(g));
      Row[g].setAttribute('class', 'spine');

      for (var q = 0; q < rows.value; q++) {
        Column[q] = Row[g].insertCell(q);
        Column[q].setAttribute('class', 'line');
        var input = document.createElement("input");
        input.type = "text";
        input.value = 1;
        input.setAttribute('class', 'cells');
        Column[q].appendChild(input);
        input.style.width = (input.value.length * 12) + "px";
        N++;
      };
    };

    setTimeout(fnAsync(g), 1);
  };
  var div = document.getElementById('divTable');
  div.appendChild(table);
}

function setMatriz(number, type) {

  var Mz = MTZ[number];

  var Rows = parseFloat(order(Mz)[0]);
  var Columns = parseFloat(order(Mz)[1]);

  var n = 0;
  var cell = new Array();
  var lines = [];

  for (var j = 0; j < Columns; j++) {

    cell[j] = [];

    for (var i = 0; i < Rows; i++) {

      lines.push(document.getElementsByClassName('cells')[n]);
      cell[j] = lines;
      n++;
    };
    lines = [];
  }
  statusInProcess = false;
}

function process() {
  createTable();
}
<input type="text" id="column">x
<input type="text" id="row">
<input type="button" value="Criar Matriz" onclick="process()">


<div id="divTable">

</div>

1
  • Ótima explicação. Irei estudar o uso das frameworks mais aprofundadamente. Obrigado pela atenção. Commented 15/11/2015 às 18:53

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .