在 jQuery Mobile 1.1 中进行繁重处理之前显示加载微调器？答案

【问题标题】：Show loading spinner before heavy processing in jQuery Mobile 1.1?在 jQuery Mobile 1.1 中进行繁重处理之前显示加载微调器？
【发布时间】：2018-03-29 00:01:51
【问题描述】：

我快疯了，想让一个微调器出现。因此，我已将繁重的处理功能绑定到一个按钮：

$(document).delegate("#clearread", "tap", onClearRead);

所以在点击时它会这样称呼：

var onClearRead = function() {

setTimeout($.mobile.showPageLoadingMsg, 5);  

// Civilised cleaning of saved status
var jStorIndex = $.jStorage.index();
for (var i = 0; i < jStorIndex.length; i++) {
    if( jStorIndex[i] != "version" ) {
        $.jStorage.deleteKey(jStorIndex[i]);
    }
}   

// Load articles afresh
loadArticles();

$.mobile.changePage("#choosearticle");

} //onClearRead

我发现在文章的清除/加载过程中（大约 10 秒），微调器没有出现，而只是在加载 #choosearticle 页面时的短暂时间（0.5 秒）。 我做错了什么？

我让微调器在应用程序的其他地方工作。

谢谢

【问题讨论】：

@Nirmal Patel 刚刚解决了我的问题，但有人知道为什么需要一个疯狂的随机设置超时吗？我读过它是关于 CPU 争用的，有人可以更详细地解释一下吗？
问题是JS在浏览器的单线程中运行。因此，如果您进行繁重的处理；在 JS 完成之前，浏览器不会尝试重绘/重绘内容。到 JS 完成的时候；我们已经调用了一个 changePage()... setTimeout 只是让浏览器有足够的喘息时间来完成其他任务，然后再回到 JS 中的繁重工作。
最后，澄清一下 - 谢谢！

标签： javascript jquery jquery-mobile

【解决方案1】：

试试这个：

$(document).delegate("#clearread", "tap", onClearRead);

var onClearRead = function() {
$.mobile.showPageLoadingMsg();
setTimeout(function(){  
        //Your heavy processing
        $.mobile.changePage("#choosearticle");
    }, 5);
} //onClearRead

【讨论】：

是的，它可以工作 - 谢谢！ 我发现如果设备运行缓慢，您可能需要增加毫秒（比如 100）。否则微调器仍然不会出现。

【解决方案2】：

jQuery.show( [duration ] [, complete ] )

将繁重的处理放在“完整”函数槽中，确保对象（调用了 show）在显示发生之前可见。

jQuery whole HTML page load with spinner

使用基于 CSS 的微调器的示例

CSS

@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg); }

  100% {
    -moz-transform: rotate(359deg); } }

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg); }

  100% {
    -webkit-transform: rotate(359deg); } }

@-o-keyframes spin {
  0% {
    -o-transform: rotate(0deg); }

  100% {
    -o-transform: rotate(359deg); } }

@-ms-keyframes spin {
  0% {
    -ms-transform: rotate(0deg); }

  100% {
    -ms-transform: rotate(359deg); } }

@keyframes spin {
  0% {
    transform: rotate(0deg); }

  100% {
    transform: rotate(359deg); } }

.icon-spin {
  display: inline-block;
  -moz-animation: spin 2s infinite linear;
  -o-animation: spin 2s infinite linear;
  -webkit-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear; }

Html 使用字体真棒

<div id="spinner" data-bind="visible: isSpinning" style="padding: 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #cccccc; z-index: 1; filter: alpha(opacity=30);">

    <i class="fa fa-spinner fa-spin fa-5x"></i>
</div>

Javascript

$('#spinner').show(100, function() {
  // Once the spinner is visible then run the heavy function.
  heavyProcessingFunction();
});

【讨论】：