javascript - Javascript/CSS 显示/隐藏有时不工作

Question

我有一个加载器 gif，我正在尝试显示/隐藏 ajax 调用以指示进度。它适用于一种功能，而不适用于另一种功能，这很奇怪。

function showThis(id) {

  document.getElementById(id).style.visibility = "visible";
}

function hideThis(id) {
  document.getElementById(id).style.visibility = "hidden";
}

jQuery(function() {
  jQuery("#testKey").click(function(event) {
    // NEXT LINE DOESN'T WORK
    showThis('loader2');
    jQuery.ajax({
      type: "POST",
      dataType: "json",
      url: "/api/?action=testKey",
      data: {
        exchange: jQuery('#setExchange').val(),
        key: jQuery('#setKey').val(),
        secret: jQuery('#setSecret').val()
      },
      success: function(data) {
        if (!data.error) {
          if (data.keyValid == true) {
            alert("API Key is valid");
          } else {
            alert("Invalid key and/or secret.");
          }
        } else {
          alert("Error: " + data.errorMsg);
        }
      }
    });
    hideThis('loader2');
    return false;
  });
});

jQuery(function() {
  jQuery('#setSave').click(function(event) {
    // THIS WORKS
    showThis("loader2");
    jQuery.post(
      '/api/?action=bcSaveSettings', {
        exchange: jQuery('#setExchange').val(),
        key: jQuery('#setKey').val(),
        secret: jQuery('#setSecret').val(),
      },
      function() {
        var newKey = jQuery('#setKey').val();
        var newSecret = jQuery('#setSecret').val();
        var exchangeNum = jQuery('#setExchange').val();
        var exchangeName = jQuery("#setExchange option:selected").text();
        jQuery("#setExchange option:selected").attr('dat', newKey);
        jQuery("#setExchange option:selected").attr('dat2', newSecret);
        if (jQuery("#depExchange option[value='" + exchangeNum + "']").length > 0 && newKey.length < 1 && newSecret.length < 1) {
          jQuery("#depExchange option[value='" + exchangeNum + "']").remove();
        } else if (jQuery("#depExchange option[value='" + exchangeNum + "']").length < 1 && newKey.length > 0 && newSecret.length > 0) {
          jQuery("#depExchange").append(jQuery('<option>', {
            value: exchangeNum,
            text: exchangeName
          }));
        }
        hideThis("loader2");
        alert("Settings saved");
      }
    );
    event.preventDefault();
  });
});

#loader1 {
  background: #ecf0f1;
  position: relative;
  height: 100%;
  visibility: hidden;
}

#loader2 {
  background: #ecf0f1;
  position: relative;
  height: 100%;
  visibility: hidden;
}

.dot {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: #2ecc71;
  border-radius: 100%;
  animation-duration: 1s;
  animation-name: loader_dot;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes loader_dot {
  0% {
    width: 0px;
    height: 0px;
  }
  to {
    width: 50px;
    height: 50px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button id="testKey">test1</button>
<BR />
<BR />
<button id="setSave">test2</button>


<div id="loader2" style="visibility:hidden">
  <div class="dot"></div>
</div>

最初我使用 jquery hide/show 但得到了相同的行为。注意：两个 ajax 调用都能正常工作，但加载器只显示 JS 注释中指示的那个。

标签： javascriptjquerycss

Answer 1

你需要打电话hideThis('loader2');。 也许或者，甚至。ajax() callback
successerrorcomplete

例子：

showThis()
jQuery.ajax({
  // `success` or `error`
  complete: function () {
    // call `hide` when the `callback` called
    hideThis()
  }
})

您的代码只需调用showand hide，它不会等待ajax执行。