Async Ajax Anruf verursacht Browser zu frieren

Question

Ich habe zwei verschiedene Sätze von a und p Elemente in meiner HTML-Seite, die standardmäßig als display:none gemacht werden.

Am Ende der von der Seite, die ich durch das Senden ihrer ID ‚s eine Funktion bin Aufruf und einige values eine von ihnen auf einigen Bedingungen

1. Satz

<a style="display:none;" id="ClickMe1">Click Me</a> 
<p class="button" id="Sorry1" style="display:none;">Sorry!</p> 

Basis zu ermöglichen, 2. set

<a style="display:none;" id="ClickMe2">Click Me</a> 
<p class="button" id="Sorry2" style="display:none;">Sorry!</p> 

Funktionsaufruf

<script> 
     window.onload = function() { 
      Initialize("ClickMe1", "Sorry1", "23,35"); 
      Initialize("ClickMe2", "Sorry2", "76,121"); 
     }; 
    </script> 

initialisieren Funktion besteht aus a ID, p ID und eine Reihe von Werten (es n Werte enthalten kann), welches Element zu überprüfen

Funktion

Javascript

function Initialize(ClickMeID, SorryID,Values) { 
var valList = Values.split(','); 
    for (i = 0; i < valList.length; i++) { 
     var paramts = "{'val':'" + valList[i] + "'}"; 
     jQuery.ajax({ 
      type: "POST", 
      url: "/services/MyService.asmx/GetData", 
      data: paramts, 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      async: false, 
      success: function (response) { 
       Status = response.d.toString(); 
      }, 
      error: function (response) { 

      } 
     }); 
      if (Status == "0") { 
        $('#' + SorryID).show(); 
        return; 
     } 
    } 
     $('#' + (ClickMeID).show(); 
} 

In meiner Funktion aktivieren ich das Komma bin Aufspalten getrennt Values und durchlaufen jeden Wert und machen einen ajax Anruf an meinen Dienst mit async:false.

Die Antwort des Erfolgsaufrufs lautet entweder 1 oder 0. Wenn einer der Values0 eines Funktionsaufrufs ist, möchte ich Element sonst a Element der gesendeten ID's anzeigen.

Diese Funktion funktioniert einwandfrei, aber wenn der Funktionsaufruf ausgelöst wird, wird browser eingefroren, bis die Funktion ausgeführt wird.

Wenn ich async: true machen Ich bin nicht in der Lage, herauszufinden, welche der Schaltflächen festlegen aktivieren und deaktivieren

Wie kann ich den Browser machen nicht einfriert.

Answer 1

Sie sollten

async: true 

gesetzt Wenn es nicht ASYNC ist, dann wird es blockiert werden.

Wenn Sie viele Elemente durchlaufen, sollten Sie auch jede Iteration in ein setTimeout umbrechen und es asynchron machen.

---

Codebeispiele

function click(e){ 
    var button = e.target; 

    $.ajax({ 
     type: "POST", 
     url: "http://localhost/accounts/save", 
data : { 
accountID: 123, 
name:"hello world" 
}, 
     beforeSend: function(){ 
      //disable the button. 
     } 
    }).always(function(){ 
     //enable the button 
    }) 

}

hier ist ein Beispiel für von setTimeout

setTimeout(function(){ 
//do something 
}, 3000); //3seconds 

ich sehr empfehlen, dass Sie sich auf jquery.Deferred und Ereignisschleifen lesen, .

Answer 2

Ich bin, um herauszufinden, nicht in der Lage, die Tasten setzten

Dann ist Ihr eigentliches Problem zu aktivieren und deaktivieren. Sie haben Ihr Problem mit anderem Code gelöst, um ein neues Problem zu verursachen.

Ich empfehle sehr, zu lesen Decoupling Your HTML, CSS, and JavaScript.

Hier ist, was ich tun würde (da Sie jquery getaggt auch könnte .. tatsächlich vollständig verwenden).

<style> 
    .is-hidden{ display: none; } 
</style> 


<div class="js-init-content" data-params="[{'val':23},{'val':35}]"> 
    <a class="is-hidden js-clickme">Click Me</a> 
    <p class="button is-hidden js-sorry">Sorry!</p> 
</div> 

<div class="js-init-content" data-params="[{'val':76},{'val':121}]"> 
    <a class="is-hidden js-clickme">Click Me</a> 
    <p class="button is-hidden js-sorry">Sorry!</p> 
</div> 


<script> 
    // when the document is ready... 
    $(document).ready(function(){ 

    // loop through each init-content item 
    $(".js-init-content").each(function(){ 
     var $this = $(this); 

     // get the data from the html element 
     // jquery will return an array containing objects 
     // because it's smart and cool like that 
     var params = $this.data('params'); 

     var isAvailable = true; 

     // loop through each param 
     $.each(params, function(index, param){ 
     // stop loop and ajax calls if any previous ajax call failed 
     if (!isAvailable) return false; 

     // make an ajax call, param will be the object from the array 
     $.ajax({ 
      type: "POST", 
      url: "/services/MyService.asmx/GetData", 
      data: param, 
      contentType: "application/json; charset=utf-8", 
      // dataType: "json", -- jquery is smart it will figure it out 
      // async: false, -- Almost no reason to ever do this 
     ).done(function(response){ 
      isAvailable = response.d.toString() != "0"; 
     }); // End Ajax-Done 
    }); // End js-init-content.each 

    var selector = isAvailable 
     ? ".js-clickme" 
     : ".js-sorry"; 

    $this.find(selector).removeClass("is-hidden"); 

    }); // End doc-ready 
</script> 

Ich verkapselte die Daten in der HTML, anstatt es in der Javascript-Codierung. Vollständig genutztes jQuery zum Laden und Aktualisieren.