在执行Jquery功能时显示动画gif

Question

我有一个密集的jQuery函数，当单击一个按钮时，它会在我的页面上发生。当这发生时我显示一个加载gif。这可能需要大约5秒钟。

我遇到的问题是动画gif在JavaScript处理时停止旋转，导致用户认为它已崩溃。有没有办法确保加载gif仍在旋转？

$('button').click(function() {
  myFunction();
});

function myFunction() {
  var text = "";
  var i = 0;
  while (i < 50500) {
    text += "<br>The number is " + i;
    i++;
  }
  $("p").append(text);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://thinkfuture.com/wp-content/uploads/2013/10/loading_spinner.gif" />
<button>click here</button>
<p></p>

DEMO http://jsfiddle.net/wgh2oseu/1/