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

尝试：

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

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

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

Answer 2

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/

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

2 个答案: