使用 javaScript 停止微调器 - SpinJs答案

【问题标题】：Stopping of spinner with javaScript - SpinJs使用 javaScript 停止微调器 - SpinJs
【发布时间】：2016-12-15 15:27:51
【问题描述】：

我可以启动微调器，但不知道如何停止它。请帮忙：

//On button click load spinner and go to another page
$("#btn1").click(function () {  
//Loads Spinner
$("#loading").fadeIn();
var opts = {
    lines: 12, // The number of lines to draw
    length: 7, // The length of each line
    width: 4, // The line thickness
    radius: 10, // The radius of the inner circle
    color: '#000', // #rgb or #rrggbb
    speed: 1, // Rounds per second
    trail: 60, // Afterglow percentage
    shadow: false, // Whether to render a shadow
    hwaccel: false // Whether to use hardware acceleration
};
var trget = document.getElementById('loading');
var spnr = new Spinner(opts).spin(trget);
});

 $("#btn2").click(function () {      
    //Write code to stop spinner

});

<button  id="btn1">Start</button>
<button id="btn2">Stop</button>

<div id="loading">
<div id="loadingcont">
    <p id="loadingspinr">
    </p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js" type="text/javascript"></script>

参考：

http://spin.js.org/
Stop Spinner.js

【问题讨论】：

停止微调器是什么意思。无论您是想隐藏它还是让它停止旋转。
任何东西，但用户不能看到它。它应该在第二次单击按钮时消失。

标签： javascript jquery spinner

【解决方案1】：

使用此代码。

$("#btn2").click(function () {      
    //Write code to stop spinner
    $('#loading').fadeOut();

});

【讨论】：

【解决方案2】：

例如，只要摧毁它 - 它就会消失

$("#btn2").click(function () {      
    document.getElementById('loading').innerHTML='';
});

【讨论】：

【解决方案3】：

$(trget).data('spinner', spnr);
$('loading').data('spinner').stop();

【讨论】：

【解决方案4】：

//On button click load spinner and go to another page
$("#btn1").click(function () {  
//Loads Spinner
$("#loading").fadeIn();
var opts = {
    lines: 12, // The number of lines to draw
    length: 7, // The length of each line
    width: 4, // The line thickness
    radius: 10, // The radius of the inner circle
    color: '#000', // #rgb or #rrggbb
    speed: 1, // Rounds per second
    trail: 60, // Afterglow percentage
    shadow: false, // Whether to render a shadow
    hwaccel: false // Whether to use hardware acceleration
};
var trget = document.getElementById('loading');
var spnr = new Spinner(opts).spin(trget);
});

 $("#btn2").click(function () {      
    //Write code to stop spinner
    $('#loading').fadeOut();
});

<button  id="btn1">Start</button>
<button id="btn2">Stop</button>

<div id="loading">
<div id="loadingcont">
    <p id="loadingspinr">
    </p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js" type="text/javascript"></script>

【讨论】：

【解决方案5】：

将var spnr 设为可访问这两个功能，

spnr = new Spinner(opts).spin(trget);


----------

 $("#btn2").click(function () {      
    //Write code to stop spinner
    spnr.stop();
});

【讨论】：