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隐藏/显示，但行为相同。注意：这两个ajax调用都可以正常工作，但是加载器仅显示JS注释中指示的那个。

Answer 1

您需要在hideThis('loader2');中致电ajax() callback。
也许success或error，甚至complete。

示例：

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

您的代码只调用show和hide，而不必等待ajax执行。

Answer 2

问题是隐藏装载程序的地方。当出现API结果时，您需要隐藏装载程序。以此修改您的代码。

function showThis(id) {
  console.log('12' + 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) {
          hideThis("loader2");
          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;
        }

      }
    });
    //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">
  <div class="dot"></div>
</div>

Answer 3

第一个按钮代码的主要问题是“ hideThis”功能。显示功能运行正常，但紧随其后是“隐藏”。

在ajax发布的“成功”代码中移动隐藏功能，应该没问题。

Javascript / CSS显示/隐藏有时不起作用

3 个答案: