javascript - 在 JavaScript 代码运行时显示加载消息

Question

我有一些在单击按钮时执行的特别慢的 jQuery 代码。我想在执行时显示加载消息/微调器。像这样：

$('#some_button').on('click', function(e){
  e.preventDefault();
  $('#spinner').show();
  really_slow_function();
  $('#spinner').hide();
});

我在等待 ajax 请求后的响应时一直这样做，但不确定在这种情况下该怎么做。这really_slow_function并不是非常低效，它只是在进行一些 dom 操作，而移动设备需要一段时间才能完成。

示例中代码的问题是微调器从不显示。我认为这是因为 JavaScript 在函数完成之前什么都不做。

任何建议都非常感谢！

Answer 1

function really_slow_function(callback) {
  var a = new Date();

  while (new Date() - a < 5000);
  callback.call(this);
}


$('#some_button').on('click', function(e) {
  e.preventDefault();
  $('#spinner').fadeIn(function() {
    really_slow_function(function() {
      $('#spinner').fadeOut();
    });
  });
});

#spinner {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id="spinner" src="http://www.nasa.gov/multimedia/videogallery/ajax-loader.gif">
<button id="some_button">click</button>

由此

http://jsfiddle.net/M5YGs/7/

Answer 2

尝试：

$('#some_button').on('click', function(e){
  e.preventDefault();
  $('#spinner').show();

  setTimeout(function() {
      really_slow_function();
      $('#spinner').hide();
  }, 50);
});

通过超时稍微延迟慢速函数的执行，应该有足够的空间供 dom 更新。