加载小工具's加载消息未显示

Load Widget's load message not displayed

本文关键字：加载 消息 显示 工具      更新时间：2023-09-26

场景：我希望通过单击按钮从一个页面转换到第二个页面，并且我希望从"转换"事件触发器到"显示"事件触发器，在第二个网页上显示加载消息。

限制条件：1.我使用的是JQM 1.4.2。2.一旦"transition"事件触发，要执行的任务是高时间要求的任务（这就是为什么我有兴趣显示加载消息），并且它们不是与AJAX相关的调用。

问题：当"transition"事件触发后请求加载消息出现时，加载消息不会出现在页面上，当"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"调用没有显示加载消息，以及我应该如何处理这项任务，我将不胜感激。谢谢

在花了一些时间自己研究并在正确的论坛上寻求帮助后，我想分享我得到的解决方案。

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

因此，重要的是启动请求以显示加载消息，然后将耗时的活动放在"setTimeout（）"调用所需的回调函数中。这样，在请求加载消息出现在页面上后，将执行"setTimeout（）"，然后完成与"transition"事件相关的回调。一旦完成，浏览器就有机会进行渲染，然后执行"setTimeout（）"回调函数中耗时的活动。

这是工作代码：

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

相关文章：