BlockUI занимает слишком много времени, чтобы заблокировать диалог jQuery

Я пытаюсь использовать jQuery BlockUI Plugin, чтобы заблокировать диалог jQuery, когда он выполняет алгоритм сортировки. Функция, которая сортируется, работает следующим образом:BlockUI занимает слишком много времени, чтобы заблокировать диалог jQuery

doSort : function() { 
    $("#sort_dlg").block(); 

    // sort... takes a few seconds 

    $("#sort_dlg").unblock(); 
}

Это работает, вроде. Диалог не блокируется до тех пор, пока ПОСЛЕ сортировки не закончится. (Сортировка выполняется локально, нет вызова AJAX или чего-то еще.) Как мне его блокировать до сортировки?

Я попытался переместить block() вызов ОК метода кнопки диалога:

$(function() { 
    $("#sort_dlg").dialog({ 
     autoOpen: false, 
     bgiframe: true, 
     modal: true, 
     buttons: { 
      "Cancel": function() { $(this).dialog("close"); }, 
      "OK": function() { 
       $("#sort_dlg").block(); 
       doSort(); 
      } 
     } 
    }); 
});

Но это не помогло. (Я открыт для предложений по блокировке пользовательского интерфейса с использованием какой-либо другой техники.)

источник

2009-10-14 twh

Возможно, это связано с тем, что blockUI использует анимации для постепенного изменения модального всплывающего окна, и пока эти анимации работают асинхронно, ваш код сортировки начинает работать. Поскольку ваш код сортировки выполняется синхронно на вашей странице, браузер блокируется до завершения кода сортировки. Ваш ответ заключается в использовании функции обратного вызова, которую я просматриваю прямо сейчас ... – Pandincus

как указано на @Pandincus вы можете подождать некоторое время, чтобы позволить blockUI завершить свою работу, а затем начать сортировать:

$(function() { 
    $("#sort_dlg").dialog({ 
     autoOpen: false, 
     bgiframe: true, 
     modal: true, 
     buttons: { 
      "Cancel": function() { $(this).dialog("close"); }, 
      "OK": function() { 
       $("#sort_dlg").block(); 
       //WAIT FOR 1 SECOND BEFORE STARTING SORTING 
       setTimeout(function(){ doSort()}, 1000); 
      } 
     } 
    }); 
});

источник

2009-10-14 04:17:46 TheVillageIdiot

O noes! Избитый удар! :- Хорошее шоу, сэр. – Pandincus

Спасибо, ребята, это работает. Теперь я должен решить, следует ли использовать метод BlockUI или disable() (предложенный Soviut). Я склоняюсь к BlockUI, потому что я думаю, что проще сказать пользователю «Подождите ...». С отключением() я не уверен, как сделать то же самое без ручной вставки полупрозрачного div с «Please wait ...» внутри. – twh

Вместо того, чтобы блокировать пользовательский интерфейс, вы должны отключить диалог, используя disable() method, как только пользователь нажмет кнопку «пойти». Таким образом, пользователь не может ничего щелкнуть во время завершения процесса.

источник

2009-10-14 04:15:09 Soviut

Спасибо, я пропустил этот метод. FYI, он имеет ту же проблему, что и BlockUI, как упоминал мой оригинальный вопрос. Метод SetTimeout, предложенный TheVillageIdiot и Pandincus, работает над его устранением. – twh

Чтобы продолжить мой комментарий выше:

При вызове $ .blockUI (), он использует анимацию для постепенного исчезновения блокирующего div, и эти анимации запускаются асинхронно. Следующая строка в вашем javascript-коде - это сложная сортировка, и этот код блокирует браузер до его завершения. В результате, анимации, которые начали работать, не заканчиваются до сортировки!

Плагин BlockUI не кажется, есть вариант функции обратного вызова, которая является позором, но это нормально - мы можем использовать встроенный SetTimeout в JavaScript:

<head> 
    <title>Test</title> 
    <script src="jquery.js"></script> 
    <script src="jquery.blockUI.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $("#btnTest").click(function() { 
       $.blockUI(); 
       setTimeout(doComplicatedStuff, 1000); 
      }); 
     }); 
     function doComplicatedStuff() 
     { 
      for(i = 0; i < 100000000; i++) 
      { 
       // ooh, complicated logic! 
      } 
      $.unblockUI(); 
     } 
    </script> 
</head> 
<body> 
    <p><input type="button" id="btnTest" value="Test" /></p> 
</body>

Хотя это не точная наука , мы в основном предполагаем, что задержка сложного кода в течение 1 секунды даст BlockUI достаточно времени для отображения наложения.

Надеюсь, это поможет!

источник

2009-10-14 04:19:12 Pandincus

$ .blockUI имеет опцию «fadeIn», которая по умолчанию составляет 200 миллисекунд. Вы можете установить это значение равным нулю, чтобы сразу же вызвать блок страницы при вызове метода. Это отключает fadeIn.

$(function() { 
$("#sort_dlg").dialog({ 
    autoOpen: false, 
    bgiframe: true, 
    modal: true, 
    buttons: { 
     "Cancel": function() { $(this).dialog("close"); }, 
     "OK": function() { 
      $("#sort_dlg").block({ fadeIn: 0 }); // disable fadeIn 
      doSort(); 
     } 
    } 
});

источник

2010-08-30 21:26:11 radian21

+1 - Спасибо большое! Ваш fadeIn сделал волшебство для моей проблемы :) –

BlockUI занимает слишком много времени, чтобы заблокировать диалог jQuery

ответ

Смежные вопросы