Question

方案：我希望通过单击按钮从页面转换到第二页，我希望在“转换”事件触发器的第二页上显示加载消息，直到“show”事件触发。

约束： 1.我正在使用JQM 1.4.2。 2.“转换”事件触发后要执行的任务是高时间要求的任务（这就是我对显示加载消息感兴趣的原因）并且它们不是与AJAX相关的调用。

问题：当“转换”事件触发时，请求显示时，页面上不会显示加载消息，而且一旦“show”事件触发，请求也不会出现。

代码：

//Show or hide the load message
function showLoader(msgText) {
    $.mobile.loading('show', {text : msgText, textVisible : true, theme : 'a'});
}

function hideLoader() {
    $.mobile.loading('hide');
} 

//'transition' event
$(document).on("pagecontainertransition", function(event, data) {
    console.log("#document:pagecontainer_transition triggered ["       
    $(data.toPage).attr("id") + "]");

    switch ($(data.toPage).attr("id")) {
        case "p1":
             break;
        case "p2":
             onTransition_p2();
             break;
        default:
    }
});

function onTransition_p2() {
    //perform long-time-consuming activity1
    console.log("onTransition_p2():starting activity 1...");
    showLoader("starting activity 1...");
    // activity 1   
    hideLoader();
    console.log("setTimeout1():activity 1 done");

    //perform long-time-consuming activity2
    console.log("onTransition_p2():starting activity 2...");
    showLoader("starting activity 2...");
    hideLoader();
    console.log("setTimeout2():activity 2 done");
 }

我真的很感激，如果有人能告诉我为什么'showLoader'调用不会导致显示加载消息，以及我应该如何处理这个任务。感谢。

Answer 1

在我自己研究并在正确的论坛上寻求帮助之后，我想分享我提供的解决方案。

首先，我们必须记住浏览器在事件回调期间不会渲染，因此在回调完成之前，任何在事件回调中显示加载消息的请求都不会执行，这可能为时已晚，特别是如果我们在页面上发出加载消息请求后，我们会尝试运行一些耗时的活动。

因此，启动显示加载消息的请求非常重要，并且将耗时的活动放在“setTimeout（）＆＃39;中所需的回调函数中”。呼叫。这样，在请求加载消息出现在页面上之后，＆＃39; setTimeout（）＆＃39;执行，然后转换＆＃39; - 事件相关的回调结束。一旦完成，浏览器就有机会渲染，然后在＆＃39; setTimeout（）＆＃39;中进行耗时的活动。执行回调函数。

以下是工作代码：

function onTransition_p2(event) {

  showLoader("starting activity1...");
  setTimeout(function() {
    //time-consuming activity1
    hideLoader();
    showLoader("starting activity2...");
    setTimeout(function() {            
        //time-consuming activity2
        hideLoader();
    }, 0);        
  }, 0);
}

我还建议阅读提供解决方案的帖子，因为解决方案的作者并不建议一次性执行耗时的活动，因为他们可以使UI线程成为锁定直到这些任务完成。

https://forum.jquery.com/topic/loader-widget-s-loading-message-not-displayed-in-jqm1-4-2

加载Widget的加载消息未显示

1 个答案: