BlockUI tarda demasiado en bloquear el cuadro de diálogo jQuery

Estoy intentando usar el jQuery BlockUI Plugin para bloquear un cuadro de diálogo jQuery mientras realiza un algoritmo de clasificación. La función que ordena funciona así:BlockUI tarda demasiado en bloquear el cuadro de diálogo jQuery

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

    // sort... takes a few seconds 

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

Funciona, tipo de. El cuadro de diálogo no se bloquea hasta DESPUÉS de que termine la clasificación. (Todo se hace localmente, no hay llamadas AJAX ni nada). ¿Cómo hago para bloquear ANTES de la ordenación?

he intentado mover la llamada al método block() botón Aceptar del cuadro de diálogo:

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

Pero eso no ayudó. (Estoy abierto a sugerencias para bloquear la UI usando alguna otra técnica.)

Fuente

2009-10-14 twh

Esto es probablemente porque blockUI usa animaciones para fundirse en el menú emergente modal, y mientras estas animaciones se ejecutan de forma asíncrona, el código de ordenación comienza a ejecutarse. Como su código de clasificación se ejecuta de forma síncrona en su página, el navegador queda bloqueado hasta que finalice el código de clasificación. Tu respuesta es usar una función de devolución de llamada, que estoy investigando en este momento ... – Pandincus

como se ha señalado por @Pandincus se puede esperar algún tiempo para que blockUI completar su trabajo y luego empezar a ordenar:

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

Fuente

2009-10-14 04:17:46 TheVillageIdiot

¡O noes! ¡Golpeado al golpe! :-D Buen espectáculo, señor. – Pandincus

Gracias chicos, esto funciona. Ahora tengo que decidir si usar BlockUI o el método disable() (sugerido por Soviut). Me inclino por BlockUI porque creo que es más sencillo decirle al usuario "Por favor, espere ...". Con disable(), no estoy seguro de cómo hacer lo mismo sin insertar manualmente un div semitransparente con "Please wait ..." inside. – twh

En lugar de bloquear la interfaz de usuario, debe deshabilitar el cuadro de diálogo usando el disable() method en el momento en que el usuario haga clic en el botón "ir". De esta forma, el usuario no puede hacer clic en nada mientras se completa el proceso.

Fuente

2009-10-14 04:15:09 Soviut

Gracias, me perdí ese método. Para su información, tiene el mismo problema que BlockUI como mencioné mi pregunta original. La técnica setTimeout sugerida por TheVillageIdiot y Pandincus funciona para resolverla. – twh

para continuar mi comentario anterior:

Cuando se llama a $ .blockUI (), utiliza animaciones para desvanecerse en el div de bloqueo, y estas animaciones se ejecutan de forma asincrónica. La siguiente línea en su código de JavaScript es su clasificación compleja, y este código bloquea el navegador hasta que finalice. ¡Como resultado, las animaciones que han comenzado a ejecutarse no terminan hasta después de la clasificación!

El plugin BlockUI no parecen tener una opción de llamada de retorno, lo cual es una lástima, pero eso está bien - podemos usar setTimeout orden interna de 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>

Aunque esto no es una ciencia exacta , básicamente estamos adivinando que demorar el código complicado por 1 segundo le dará a BlockUI el tiempo suficiente para mostrar la superposición.

Espero que esto ayude!

Fuente

2009-10-14 04:19:12 Pandincus

$ .blockUI tiene una opción llamada "fadeIn" que tiene como valor predeterminado 200 milisegundos. Puede establecer este valor en cero para que el bloqueo de la página se produzca inmediatamente cuando se llama al método. Esto desactiva el fadeIn.

Fuente

2010-08-30 21:26:11 radian21

+1 - Muchas gracias, hombre! Tu cosa fadeIn hizo magia para mi problema :) –

BlockUI tarda demasiado en bloquear el cuadro de diálogo jQuery

Respuesta

Cuestiones relacionadas