为什么在运行图形之前会弹出alert(），而不会弹出对话框或DIV

Why does alert() pop up, but not dialogs, or DIV before running graphics?

本文关键字：对话框 DIV alert 图形 运行 为什么 运行图      更新时间：2023-09-26

我将jQuery与jqPlot一起使用。由于显示不同的数据需要几秒钟的时间，我想添加一些数据正在处理的指示符，这样用户就不会认为滑块不起作用。

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

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

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

我也尝试过使用对话框。这也会在绘制图形后显示。

但当我使用alert((框时，警报首先出现，我按"ok"，然后绘制图形。

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

CSS代码(只是让它非常显眼的东西(：

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

显示/隐藏加载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((将显示"正在加载"消息。

这很可能是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，但似乎没有任何好处，而且很难遵循代码流。

您应该尝试始终依赖回调，而不是尝试依赖定时。

相关文章：