Question

我的html页面中有两组不同的a和p元素，默认情况下为display:none。

在页面的最后，我通过发送他们的ID和一些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>

初始化函数由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的{{1}}元素a元素。

这个函数工作正常，但是当引发函数调用时，这会使ID's冻结，直到执行函数。

如果我browser我无法找到启用和禁用哪组按钮

如何防止浏览器冻结。

Answer 1

你应该设置

async: true

如果它不是异步，那么它就会阻塞。

另外，如果你循环遍历很多项，你应该将每个迭代包装在一个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中，而不是在javascript中对其进行硬编码。完全用于加载和更新的jQuery。

异步ajax调用导致浏览器冻结

2 个答案: