Połączenie AJAX zamraża przeglądarkę przez chwilę, gdy otrzymuje odpowiedź i wykonuje sukces

Question

Wykonuję połączenie AJAX z moim serwerem, który pobiera dużo danych. Pokaż obraz ładujący, który obraca się podczas wykonywania wywołania ajax, a następnie znika.

Zauważyłem, że wszystkie przeglądarki w tym konkretnym telefonie sprawiają, że nie reaguje przez około 7 sekund. W związku z tym obraz ładujący NIE wiruje jak to, co zaplanowałem podczas pobierania.

Nie wiedziałem, czy to jest coś, co się dzieje, czy jest jakiś sposób, aby w pewnym sensie spowodować rozwidlenie(), tak że robi to jedno, podczas gdy moja ikona ładowania wciąż się kręci.

Myśli? Pomysły?

poniżej jest kod jak ktoś chciał to zobaczyć:

$("div.loadingImage").fadeIn(500);//.show(); 
      setTimeout(function(){ 
      $.ajax({ 
       type: "POST", 
       url: WEBSERVICE_URL + "/getChildrenFromTelTree", 
       dataType: "json", 
       async: true, 
       contentType: "application/json", 
       data: JSON.stringify({ 
        "pText": parentText, 
        "pValue": parentValue, 
        "pr_id": LOGGED_IN_PR_ID, 
        "query_input": $("#queryInput").val() 
       }), 
       success: function (result, textStatus, jqXHR) { 
        //alert("winning"); 
        //var childNodes = eval(result["getChildrenFromTelTreeResult"]); 
        if (result.getChildrenFromTelTreeResult == "") { 
         alert("No Children"); 
        } else { 
         var childNodes = JSON.parse(result.getChildrenFromTelTreeResult); 
         var newChild; 
         //alert('pText: '+parentText+"\npValue: "+parentValue+"\nPorofileID: "+ LOGGED_IN_PR_ID+"\n\nFilter Input; "+$("#queryInput").val()); 
         //alert(childNodes.length); 
         for (var i = 0; i < childNodes.length; i++) { 
          TV.trackChanges(); 
          newChild = new Telerik.Web.UI.RadTreeNode(); 
          newChild.set_text(childNodes[i].pText); 
          newChild.set_value(childNodes[i].pValue); 
          //confirmed that newChild is set to ServerSide through debug and get_expandMode(); 
          parentNode.get_nodes().add(newChild); 
          TV.commitChanges(); 
          var parts = childNodes[i].pValue.split(","); 
          if (parts[0] != "{fe_id}" && parts[0] != "{un_fe_id}") { 
           newChild.set_expandMode(Telerik.Web.UI.TreeNodeExpandMode.ServerSide); 
          } 
         } 
        } 
        //TV.expand(); 
        //recurseStart(TV); 
       }, 
       error: function (xhr, status, message) { 
        alert("errrrrror"); 
       } 
      }).always(function() { 
        $("div.loadingImage").fadeOut(); 
       }); 
       },500); 

corworker kopalni zauważył ten problem i zaproponował dodać setTimeout (function() {..}, 500); ale nie rozwiązuje problemu, więc najprawdopodobniej zostanie usunięty.

Answer 1

Ponieważ JavaScript jest pojedynczy wątek, wiele przetwarzania synchronizacji zawiesza kolejkę zdarzeń i uniemożliwia wykonywanie innego kodu. W twoim przypadku jest to pętla fors, która blokuje przeglądarkę podczas jej wykonywania.

Możesz spróbować umieścić wszystkie swoje iteracje w kolejce zdarzeń.

for (var i = 0 ; i < childNodes.length ; i = i + 1) { 
    (function(i) { 
     setTimeout(function(i) { 
      // code-here 
     }, 0) 
    })(i) 
} 

To powinno przerwać przetwarzanie i nie zmuszać przeglądarki do zakończenia ich wszystkich naraz. Funkcja self executing służy do utworzenia zamknięcia, które będzie utrzymywać wartość licznika pętli i.