javascript - 为什么在运行图形之前会弹出alert()，但不会弹出对话框或DIV？

Question

我正在使用 jQuery 和 jqPlot。由于显示不同的数据需要几秒钟的时间，因此我想添加一些指示数据正在处理的指示器，以便用户不会认为 slider 不起作用。

在执行 jqPlot 之前，我尝试显示这个 div:

<div id=loading>
   <p>loading</p>
</div>

当使用Firebug单步执行代码时，DIV会在jqPlot完成后正确显示并消失，但是当我正常运行程序时，DIV会在重新绘制图形之后显示。

我也尝试过使用对话框。绘制图表后也会显示该内容。

但是当我使用alert()框时，警报首先出现，我按“确定”，然后绘制图表。

在图形完成之前，我必须做什么才能显示某种类型的消息？

CSS 代码(只是使其非常可见):

        .loading {
            font-size: 50pt ;
            border: 1px solid #000000;
            width: 1250px;
            background-color: green;
        }    

显示/隐藏.loading DIV的代码

        <div class="layout"> 
                <div class="layout-slider-settings"></div>     

                <div class="layout-slider">
                  <input id="Slider0" name="area" value="1" >
                </div>
                <script type="text/javascript" charset="utf-8">
                  jQuery("#Slider0").slider(  
                         lots of parameters here
                    {
                       $( ".loading" ).show() ;
                  //     alert("Am I visible?" ) ;  IF THIS IS UNCOMMENTED, THE 'loading' MESSAGE DOES NOT APPEAR                       
                       x = this.getValue() ;                      
                       plot0.replot(); 
                       plot0.destroy() ;                                                            
                       plot0 = createChart( line0, 'chart0', 'Package ONE', 4, 9, x*7) ;
                       // alert("about to disappear" ) ;
                        $( ".loading" ).hide() ;                        
                    } 
                    });

                </script>
                <div class="layout-slider-settings">                
                </div>
        </div>
        <div class="loading"><p>loading</p></div> 

createChart 代码:

<script type="text/javascript" >
          function createChart( data, chart, title, lowerLimit, upperLimit, numDays )
        {

               plot = $.jqplot( chart,  [data], {

                lots of parameters here

            });   
            return plot ;     
        } <!-- end create document -->          

文档准备代码:

$(document).ready(function(){

   $( ".loading" ).hide() ;
   $.jqplot.config.enablePlugins = false;   
}); 

浏览代码或使用alert()将显示“正在加载”消息。

Answer 1

这很可能是 JS 单线程情况 - 没有异步事件允许 DOM 在演出后更新。试试这个。

 $( ".loading" ).show() ;
 window.setTimeout(function() {

     //     alert("Am I visible?" ) ;  IF THIS IS UNCOMMENTED, THE 'loading' MESSAGE DOES NOT APPEAR                       
     x = this.getValue() ;                      
     plot0.replot(); 
     plot0.destroy() ;                                                            
     plot0 = createChart( line0, 'chart0', 'Package ONE', 4, 9, x*7) ;
     // alert("about to disappear" ) ;
     $( ".loading" ).hide() ;         
},50);

您只需要释放线程足够长的时间即可发生其他事情。

另外:为什么要在 document.ready 之前运行 jqPlot 设置脚本？这看起来很脆弱，它可能会起作用，因为您实际上是在脚本之前创建了 DIV，但似乎没有任何好处，并且很难遵循代码流。