javascript - 如何使在按钮上实现的加载旋转器在脚本运行完成后停止？

Question

我有一个提交按钮，单击它即可运行脚本。

<input type="submit" value="Download Files" class="btn btn-success col-md-4"  id="load" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Downloading Files">

$('.btn').on('click', function() {
  var $this = $(this);
  $this.button('loading');
  setTimeout(function() {
    $this.button('reset');
  }, 8000);
});

脚本运行时间不是恒定的；它不时变化。我希望加载在单击提交按钮时开始，并在脚本运行完成后结束。我怎样才能做到这一点？

Answer 1

你的代码

$('.btn').on('click', function() {    
var $this = $(this);
$this.button('loading');
setTimeout(function() {
$this.button('reset');
}, 8000);
});

需要一些补充。按以下顺序添加这些外部java脚本

• jQuery.min.js
• bootstrap.min.js

Here is the working fiddle