BlockUI trwa zbyt długo, aby zablokować okno dialogowe jQuery.

Próbuję użyć jQuery BlockUI Plugin, aby zablokować okno dialogowe jQuery podczas wykonywania algorytmu sortowania. Funkcja sortowania działa w następujący sposób:BlockUI trwa zbyt długo, aby zablokować okno dialogowe jQuery.

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

    // sort... takes a few seconds 

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

Działa, rodzaj. Okno dialogowe nie zostanie zablokowane do momentu zakończenia sortowania. (Sortowanie odbywa się lokalnie, nie ma wywołania AJAX ani nic takiego.) Jak mogę je zablokować PRZED sortowaniem?

Próbowałem przeniesienie połączenia block() na przycisk OK metody w oknie dialogowym:

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

Ale to nie pomogło. (Jestem otwarty na sugestie dotyczące blokowania interfejsu użytkownika przy użyciu innej techniki.)

Źródło

2009-10-14 twh

Jest tak prawdopodobnie dlatego, że blockUI używa animacji do pojawiania się w wyskakującym okienku modalnym, a podczas gdy te animacje działają asynchronicznie, kod sortowania zaczyna działać. Ponieważ Twój kod sortowania działa synchronicznie na Twojej stronie, przeglądarka jest blokowana do czasu zakończenia kodu sortowania. Twoja odpowiedź brzmi: użyj funkcji zwrotnej, na którą teraz patrzę ... – Pandincus

jak wskazał przez @Pandincus można czekać na jakiś czas pozwolić blockUI zakończyć swoje prace, a następnie uruchomić sortowania:

$(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); 
      } 
     } 
    }); 
});

Źródło

2009-10-14 04:17:46 TheVillageIdiot

O noes! Pobity do ponczu! :-D Dobry występ, proszę pana. – Pandincus

Dzięki chłopaki, to działa. Teraz muszę zdecydować, czy użyć BlockUI, czy metody disable() (sugerowanej przez Soviut). Przechodzę do BlockUI, ponieważ myślę, że łatwiej jest powiedzieć użytkownikowi "Proszę czekać ...". W przypadku wyłączenia() nie jestem pewien, jak to zrobić, bez ręcznego wstawiania półprzezroczystego elementu div z "Proszę czekać ..." wewnątrz. – twh

Zamiast blokować interfejs użytkownika, należy wyłączyć okno dialogowe za pomocą disable() method w momencie, gdy użytkownik kliknie przycisk "go". W ten sposób użytkownik nie może kliknąć niczego podczas procesu.

Źródło

2009-10-14 04:15:09 Soviut

Dzięki, tęskniłem za tą metodą. FYI, ma ten sam problem jak BlockUI, jak wspomniano moje oryginalne pytanie. Technika setTimeout zasugerowana przez TheVillageIdiot i Pandincus działa w celu jej rozwiązania. – twh

Aby kontynuować mój komentarz powyżej:

Po wywołaniu $ .blockUI (), wykorzystuje animacje do zanikania bloku blokującego, a animacje te są uruchamiane asynchronicznie. Następna linia kodu javascript jest złożonym sortowaniem, a ten kod blokuje przeglądarkę, aż do jej zakończenia. W rezultacie animacje, które rozpoczęły działanie, nie kończą się aż do sortowania!

Wtyczka BlockUI nie wydaje się mieć opcję funkcja zwrotna, która jest wstyd, ale to jest OK - możemy użyć JavaScript jest wbudowane setTimeout:

<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>

Chociaż nie jest nauką ścisłą , w zasadzie zgadujemy, że opóźnienie skomplikowanego kodu przez 1 sekundę da BlockUI wystarczająco dużo czasu na wyświetlenie nakładki.

Mam nadzieję, że to pomoże!

Źródło

2009-10-14 04:19:12 Pandincus

$ .blockUI ma opcję o nazwie "fadeIn", która domyślnie wynosi 200 milisekund. Możesz ustawić tę wartość na zero, aby blok strony pojawił się natychmiast po wywołaniu metody. To wyłącza zanikanie.

$(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(); 
     } 
    } 
});

Źródło

2010-08-30 21:26:11 radian21

+1 - Wielkie dzięki! Twoja fadeIn sprawiła magię dla mojego problemu :) –

BlockUI trwa zbyt długo, aby zablokować okno dialogowe jQuery.

Odpowiedz

Powiązane problemy