jQuery单击事件 - 按钮被冻结

Question

我在html页面上有一个按钮，当用户点击它时，应该以某种方式克隆和处理部分html表单。克隆和处理需要一些时间，我想显示加载程序。

  $(".dashed_button.add_supplier").click(function(){

        $(".supply-details-tab .inner_tab .supplier_info_link").last().after('<div class="loader"></div>');

        //Create new tab link
        var newTabLink = $(".inner_tab .supplier_info_link").last().clone();
        $(".inner_tab .supplier_info_link").removeClass("active");
        $(newTabLink).addClass("active");

        //Get last existing index
        var lastIndex= parseInt($(newTabLink).attr('id').substring(14));
        var newIndex = lastIndex+1;
        var lastExistingTab = $(".supply-details-tab .tab-pane").last().find("> .subform_fields_wrapper");


        cloningSupplyDetails($(lastExistingTab), $("#supplier_"+newIndex));

        $(".supply-details-tab .inner_tab .loader").remove();
    });

问题是点击按钮冻结后，没有显示加载程序，用户无法理解发生了什么。一段时间后，显示新的克隆子表单。

如何在功能执行期间停止按钮冻结并显示加载程序？

Answer 1

您是同步功能的受害者，它会一直挂起，直到完成。

---

在同步代码中，每一行都是一个接一个地运行，这意味着在调用每一行之前不允许该函数完成。

  

用户按下按钮：

     

  
1. 显示正在加载
  
2. 做事
  
3. 隐藏加载
  
4. 返回内容
  
5. UI更新
  
6. 退出
  

UI将在4之后的某处更新。这通常不是问题，因为大多数代码可以同步运行而没有问题，并且在很多情况下都很有意义，但在您的情况下，您可能需要多线程布局：

  

用户按下按钮：

 Thread 1:

   1. Show loading
   2. UI Update
   3. Exit

 Thread 2:

   1. Do stuff
   2. Hide loading
   3. Return stuff
   4. UI Update
   5. Exit.

然后按以下顺序将它们称为异步：

  

  
1. 主题1
  
2. 线程2
  

---

异步

指的是在与调用线程分开的线程上调用代码块。如果您曾经使用过setTimeout或setInterval方法，那么您可能对此很熟悉。

您可以运行以下代码：

var i = 1;

setTimeout(function(){
    $("div.red").addClass(".blue");
}, 500);

return i;

这里发生的事情是i被声明为1，返回，然后.5s后，div.red变为div.red.blue。超时中的函数在返回i后半秒被称为异步;因此，在返回i之前不需要完成。

这是您希望在代码中实现的目标。

---

所以你要做的就是首先显示加载;然后使用异步调用，例如延迟为1的setTimeout，执行所有克隆，处理等操作。完成后，您可以隐藏加载。这将使您的UI在处理完成时不会冻结。

这将是这样的：

$(".loading").show();

setTimeout(function(){

    //Process stuff
    $(".loading").hide();

}, 1);

---

Other examples of asynchronous JavaScript