Почему всплывающее предупреждение (), но не диалоги или DIV перед запуском графики? - PullRequest
Новая
       9

Почему всплывающее предупреждение (), но не диалоги или DIV перед запуском графики?

0 голосов
/ 05 июля 2011

Я использую jQuery с jqPlot.Поскольку отображение разных данных занимает несколько секунд, я хочу добавить индикатор того, что данные обрабатываются, чтобы пользователь не думал, что ползунок не работает.

Прямо перед выполнением 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;
        }

Код, который показывает / скрывает загрузочный 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 () отобразится сообщение «loading».

Ответы [ 2 ]

1 голос
/ 05 июля 2011

Вы должны стараться всегда полагаться на обратные вызовы вместо того, чтобы пытаться полагаться на время.

1 голос
/ 05 июля 2011

Скорее всего, это однопоточная ситуация 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);

Вам просто нужно освободить поток достаточно долго, чтобы произошло что-то еще.

Также: почему вы запускаете сценарий установки jqPlot до document.ready?Это кажется хрупким, это может сработать, потому что вы на самом деле создаете DIV непосредственно перед сценарием, но, кажется, не получаете никакой выгоды, и трудно следовать за потоком кода.

...