单击表格行时显示微调器答案

【问题标题】：Show Spinner When Teble Row Click单击表格行时显示微调器
【发布时间】：2017-11-20 02:16:36
【问题描述】：

我有一张桌子。当我单击表行时，调用 ajax 请求函数然后加载多个表。我想在 ajax 方法运行时显示微调器。所以我编写如下代码。

$(".table-row").click(function (evt) {
   ShowSpinnerFuntion();
   var $cell = $(evt.target).closest('td'), msg;
   var id = $cell.attr("id");
   CallAjaxMethodForTable1(id);
   CallAjaxMethodForTable2(id);
   CallAjaxMethodForTable3(id);
   CallAjaxMethodForTable4(id);
});

当我执行此单击功能时，在所有表都加载了 ajax 请求后会显示微调器。即 ajax 方法在“ShowSpinnerFuntion()”方法之前运行，尽管我首先调用方法（显示微调器）。

我在这个click函数方法中只写了show spinner函数。比如：

$(".table-row").click(function (evt) {
   ShowSpinnerFuntion();
   var $cell = $(evt.target).closest('td'), msg;
   var id = $cell.attr("id");
   //CallAjaxMethodForTable1(id);
   //CallAjaxMethodForTable2(id);
   //CallAjaxMethodForTable3(id);
   //CallAjaxMethodForTable4(id);
});

当我像上面一样执行点击功能时，直接显示微调器。如何在 ajax 请求函数之前执行微调器函数。我怎样才能优先考虑这个javascript函数。

【问题讨论】：

标签： javascript jquery ajax user-defined-functions

【解决方案1】：

只需在行点击函数中调用所需的 ajax 函数

$(".table-row").click(function (evt) {
   var $cell = $(evt.target).closest('td'), msg;
   var id = $cell.attr("id");
   CallAjaxMethodForTable1(id);
   CallAjaxMethodForTable2(id);
   CallAjaxMethodForTable3(id);
   CallAjaxMethodForTable4(id);
});

然后定义如下函数。一开始显示加载器，成功或错误时隐藏加载器。

function CallAjaxMethodForTable1(){
$('.loaderImage').show();
$.ajax({
        type: "POST",
        url: "/some_url",
        data: { id: id },                        
        success: function(data){                
            $('.loaderImage').hide();
        },
        error: function (response) {
           $(".loaderImage").hide();

       }           
    });
}

【讨论】：

【解决方案2】：

希望能成功

$(".table-row").click(function (evt) {
$('.loaderImage').show();
   var $cell = $(evt.target).closest('td'), msg;
   var id = $cell.attr("id");
   CallAjaxMethodForTable1(id);
   CallAjaxMethodForTable2(id);
   CallAjaxMethodForTable3(id);
   CallAjaxMethodForTable4(id);
});



function CallAjaxMethodForTable4(){
$.ajax({
        type: "POST",
        url: "/some_url",
        data: { id: id },                        
        success: function(data){                
            $('.loaderImage').hide();
        },
        error: function (response) {
           $(".loaderImage").hide();

       }           
    });
}

并且在每个方法中都提到这个代码

 error: function (response) {
               $(".loaderImage").hide();

           }

【讨论】：

【解决方案3】：

一个很好的方法是通过 jQuery 的全局 ajax 事件处理程序 .ajaxStart() 和 .ajaxStop()。

.ajaxStart() - 注册第一个 Ajax 请求开始时要调用的处理程序。

.ajaxStop() - 注册一个在所有 Ajax 请求都完成时调用的处理程序。

因此，在您的情况下，您可以在 .ajaxStart() 上显示微调器并在 .ajaxStop() 上隐藏它，而不必担心在点击表格时显示/隐藏它。这将被全局处理，并且也适用于其他请求，这是异步加载数据时的一个好习惯。

检查 sn-p 以获得有效的演示：

$(document).ready(function() {
  //when ajax request is started
  $(document).ajaxStart(function(event, jqXHR) {
    $(".loader").show();
  });

  //when all ajax requests are completed
  $(document).ajaxStop(function(event, jqXHR) {
    $(".loader").hide();
  });

  $("#makeRequest").on("click", function() {
    $.ajax({
      method: "GET",
      url: "https://jsonplaceholder.typicode.com/comments"
    });
  });
});

.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
}

.loader {
  display: none;
  color: #ffffff;
  font-size: 11px;
  text-indent: -99999em;
  margin: 55px auto;
  position: relative;
  width: 10em;
  height: 10em;
  box-shadow: inset 0 0 0 1em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

.loader:before,
.loader:after {
  position: absolute;
  content: '';
}

.loader:before {
  width: 5.2em;
  height: 10.2em;
  background: #0dc5c1;
  border-radius: 10.2em 0 0 10.2em;
  top: -0.1em;
  left: -0.1em;
  -webkit-transform-origin: 5.2em 5.1em;
  transform-origin: 5.2em 5.1em;
  -webkit-animation: load2 2s infinite ease 1.5s;
  animation: load2 2s infinite ease 1.5s;
}

.loader:after {
  width: 5.2em;
  height: 10.2em;
  background: #0dc5c1;
  border-radius: 0 10.2em 10.2em 0;
  top: -0.1em;
  left: 5.1em;
  -webkit-transform-origin: 0px 5.1em;
  transform-origin: 0px 5.1em;
  -webkit-animation: load2 2s infinite ease;
  animation: load2 2s infinite ease;
}

@-webkit-keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="makeRequest">Make a request</button>
<div class="loader">Loading...</div>

【讨论】：

【解决方案4】：

$('.loaderImage').show();
$.ajax({
        type: "POST",
        url: "/some_url",
        data: { id: id },  
        beforeSend: function () {
                    $(".loaderImage").show();
                },                      
        success: function(data){                
            $('.loaderImage').hide();
        },
        error: function (response) {
           $(".loaderImage").hide();

       }           
    });
}```

【讨论】：