Llamada AJAX congela el navegador un poco mientras recibe respuesta y ejecuta el éxito

Question

Estoy haciendo una llamada AJAX a mi servidor web, que obtiene una gran cantidad de datos. muestro una imagen de carga que gira mientras se ejecuta la llamada ajax y luego se desvanece.

Lo que he notado es que todos los navegadores de esta llamada en particular lo dejarán sin respuesta durante aproximadamente 7 segundos. Dicho esto, la imagen de carga NO está girando como lo que había planeado mientras estaba ocurriendo la recuperación.

No sabía si esto era algo que sucedía o si había una forma de evitarlo, en cierto sentido causaba que hubiera un tenedor() para que hiciera 1 cosa, mientras mi ícono de carga aún gira.

¿Pies? Ideas?

a continuación es el código como alguien quería verlo:

$("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); 

Un corworker mío se dio cuenta de este problema, y ​​sugirió agrego un setTimeout (function() {..}, 500); pero no soluciona el problema, por lo que lo más probable es que se elimine.

Answer 1

Dado que JavaScript tiene una sola hebra, un gran número de procesos de sincronización colgará la cola de eventos y evitará que se ejecute otro código. En su caso, es el ciclo for eso bloquea el navegador mientras se está ejecutando.

Lo que puedes probar es poner todas tus iteraciones en tu cola de eventos.

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

Esto debería espaciar el procesamiento y no obligar al navegador a terminarlos todos a la vez. La función autoejecutable está ahí para crear un cierre para mantener el valor del contador de bucles i.