Блог

Главная - Вопросы по программированию - Блок пользовательского интерфейса, пока другой фрагмент кода JavaScript не завершит работу с использованием jQuery

Блок пользовательского интерфейса, пока другой фрагмент кода JavaScript не завершит работу с использованием jQuery

#jquery

#jquery

Вопрос:

Я не использую Ajax, но я хотел отобразить экран загрузки до завершения другого фрагмента кода JavaScript. Я пробовал ниже, но, похоже, это не работает.

Любая помощь высоко ценится.

 <html>
    <head>
        <title>Load Test</title>
        <script type="text/javascript" src="jquery-1.6.1.js"></script>
        <script type="text/javascript" src="jquery.blockUI.js"></script>

        <script type="text/javascript">
            function linkHandler(){
                for(i=0;i<2;i  ){
                    for(j=0;j<500;j  ){
                        document.getElementById("datafield").value=document.getElementById("datafield").value new Date() "n";
                    }
                }
            }
        </script>
    </head>
    <body>
        <textarea name="datafield" id="datafield" cols="80" rows="15"></textarea>
        <br/>
        <a href="javascript:void(0)" >Link 1</a><br/>
        <a href="javascript:void(0)" >Link 2</a><br/>
        <a href="javascript:void(0)" >Link 3</a><br/>
        <a href="javascript:void(0)" >Link 4</a><br/>
        <a href="javascript:void(0)" >Link 5</a><br/>

        <script type="text/javascript">
            $('a').click(function(event) {
                $.blockUI();
                document.getElementById("datafield").value=document.getElementById("datafield").value new Date() " Screen blocked n";
                linkHandler();
                document.getElementById("datafield").value=document.getElementById("datafield").value new Date() " Function overn";
                   $.unblockUI();
                   document.getElementById("datafield").value=document.getElementById("datafield").value new Date() " Screen unblocked n";
                   return false;
            });
        </script>
    </body>
</html>

Комментарии:

1. Как выглядит ваш серверная часть. Если вы не используете ajax, почему бы вам просто не вычислить все это с помощью вашего php или любого другого кода?

Ответ №1:

Хитрость в том, что вы должны удалить uiBlock() внутри linkHandler, чтобы он не позволял пользователю нажимать на что-либо или сообщать им, что что-то обрабатывается.

Примечание: Дайте некоторый интервал, чтобы вы могли увидеть это в действии :-).

Взгляните на следующий код, он работает.

 <html>
<head>
<title>Load Test</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://jquery.malsup.com/block/jquery.blockUI.js?v2.38"></script>

<script type="text/javascript">
function linkHandler(){
    for(j=0;j<5;j  ){
        document.getElementById("datafield").value=document.getElementById("datafield").value new Date() "n";
        sleep(100);
    }
    sleep(100);
    $.unblockUI();
}

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i  ) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}
</script>

</head>
<body>

<textarea name="datafield" id="datafield" cols="80" rows="15"></textarea>
<br/>
<a href="javascript:void(0);" onClick="$.blockUI();sleep(100);setTimeout('linkHandler()', 500);" >Link 1</a><br/>

</body>
</html>

Надеюсь, это поможет для всего, чего вы пытаетесь достичь.