Async ajax вызов, вызывающий замораживание браузера

Question

У меня есть два разных набора a и p элементов на моей странице html, которые сделаны как display:none по умолчанию.

В конце страницы я звоню функцию, посылая их ID «S и некоторые values для того, чтобы любой из них, основываясь на некоторых условиях

1й сет

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

второй набор

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

вызов функции

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

функция

Initialize состоит из a ID, p ID и набор значений (он может содержать n значения), чтобы проверить, какой элемент, чтобы включить

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(); 
} 

В моей функции я разделив запятой отделив Values и перейдя через каждое значение и сделав запрос ajax к моей службе с помощью async:false.

Ответ на звонок по вызову: 1 или 0. Если какой-либо из Values является 0 вызова функции, я хочу отобразить p элемент else a элемент отправленного ID's.

Эта функция работает нормально, но когда вызов функции поднят, это заставляет замораживать browser до выполнения функции.

Если я async: true я не в состоянии выяснить, какой набор кнопок для включения и отключения

Как я могу предотвратить браузер от замерзания.

Answer 1

Вы должны установить

async: true 

Если это не ASync, то он будет блокировать.

Кроме того, если вы перебираете множество элементов, вы должны обернуть каждую итерацию в setTimeout и сделать ее асинхронной.

---

Образцы кода

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 
    }) 

}

вот пример из SetTimeout

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

Я настоятельно рекомендую, чтобы вы прочитали на jquery.Deferred и петли событий ,

Answer 2

Я не в состоянии выяснить, какой набор кнопок для включения и отключения

Тогда это ваша реальная проблема. Вы решили проблему с другим кодом, чтобы вызвать новую проблему.

Я настоятельно рекомендую прочитать Decoupling Your HTML, CSS, and JavaScript.

Вот что я сделал бы (поскольку вы отметили jquery возможно также .. фактически полностью использовать).

<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> 

Я инкапсулировал данные в html, а не hardcoding в javascript. Полностью используется jQuery для загрузки и обновления.