在加载 Bootstrap 选项卡时显示一条消息答案

【问题标题】：Display a message while loading Boostrap tabs在加载 Bootstrap 选项卡时显示一条消息
【发布时间】：2014-08-20 15:05:53
【问题描述】：

我在 Bootstrap 中使用标签，我想在标签加载时显示一条消息，但它不起作用；该消息仅在加载选项卡时显示。

HTML

<div id="loading_text">&nbsp;</div>
<ul class="nav nav-tabs navbar-default" id="tabs" style="border-top-right-radius: 3px;border-top-left-radius: 3px;">
    <li id="ong1" class="active"> <a href="#ind_qualserv" id="lien_ind_qualserv" data-toggle="tab">Onglet 1</a></li>
    <li id="ong2" ><a href="#ind_incident" id="lien_ind_incident" data-toggle="tab">Onglet 2</a></li>
    <li id="ong3" ><a href="#ind_probleme" id="lien_ind_probleme" data-toggle="tab">Onglet 3</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="cont_ong1">&nbsp;</div>
    <div class="tab-pane"        id="cont_ong2">&nbsp;</div>
    <div class="tab-pane"        id="cont_ong3">&nbsp;</div>
 </div>

标签的Javascript

$("#ong1").click(function(e) {

    //  Loading information
    $("#loading_text").append('tab 1 is loading');

   // My function replaced here by sleep
    sleep(2);

    // Loading is finish, unshow message
    $("#loading_text").empty();
     $("#loading_text").append('&nbsp;');

});

我不想这样做： - 显示消息 - 构建选项卡的功能 - 隐藏消息

见： http://jsfiddle.net/jor7onr9/

Tab1 & Tab2 : 点击一个标签我们看不到消息（因为显示和隐藏） Tab3 : 点击后，消息出现在末尾p>

【问题讨论】：

标签： jquery twitter-bootstrap tabs

【解决方案1】：

由于javascript只有一个线程，看起来浏览器被执行功能占用，没有时间渲染更新。

一种可能的解决方案是通过异步调用函数让页面呈现：

// Click on tab1
$("#ong1").click(function(e) {

    //  Loading information
    $("#loading_text").append('tab 1 is loading');

   // My function replaced here by sleep
    window.setTimeout(function() { 
        sleep(2);
        $("#loading_text").empty();
        $("#loading_text").append('&nbsp;');
    }, 50);

});

这里有一个工作小提琴：http://jsfiddle.net/jor7onr9/3/

另见Render html immediately after Jquery append

【讨论】：