2

ボタンがクリックされたときに実行される特に遅いjQueryコードがいくつかあります。実行中に読み込み中のメッセージ/スピナーを表示したいと思います。そのようなもの：

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

私はajaxリクエストに続く応答を待つときにこれを常に行いますが、この場合に何をすべきかわかりません。これreally_slow_functionはわいせつに非効率的ではありません。それは単にいくつかのdom操作を行っているだけであり、モバイルデバイスはそれを実行するのに時間がかかります。

この例のコードの問題は、スピナーが表示されないことです。関数が終了するまでJavaScriptが何もしていないからだと思います。

どんな提案も大歓迎です！

4

2 に答える 2

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/

于 2012-08-24T16:25:31.887 に答える
1

試す：

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

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

タイムアウトを使用してスロー関数の実行を少し遅らせることで、DOM を更新するための十分なスペースが必要になります。

于 2012-08-24T16:12:35.903 に答える