javascript - negrita - title css

Cómo implementar un bloqueo en JavaScript

Question

¿Cómo se podría implementar algo similar al lock en C # en JavaScript?

Entonces, para explicar lo que estoy pensando, un caso de uso simple es:

El usuario hace clic en el botón B B plantea un evento onclick. Si B está en event-state evento, el evento espera que B esté en ready-state antes de propagarse. Si B está en ready-state , B está bloqueado y se establece en event-state , entonces el evento se propaga. Cuando se completa la propagación del evento, B se establece en ready-state .

Pude ver cómo se podía hacer algo parecido a esto, simplemente agregando y eliminando el ready-state de ready-state clase del botón. Sin embargo, el problema es que un usuario puede hacer clic en un botón dos veces seguidas más rápido de lo que se puede establecer la variable, por lo que este intento de bloqueo fallará en algunas circunstancias.

¿Alguien sabe cómo implementar un bloqueo que no fallará en JavaScript?

Answer 1

¿Por qué no deshabilita el botón y lo habilita después de que termine el evento?

<input type="button" id="xx" onclick="checkEnableSubmit(''true'');yourFunction();">
<script type="text/javascript">
function checkEnableSubmit(status) {
document.getElementById("xx").disabled = status;
}
function yourFunction(){
//add your functionality
checkEnableSubmit(''false'');
}
</script>

¡Feliz codificación!

Answer 2

Algunas adiciones a la respuesta de JoshRiver según mi caso;

var functionCallbacks = [];
var functionLock = false;
var getData = function (url, callback) {
if (functionLock) {
functionCallbacks.push(callback);
} else {
functionLock = true;
functionCallbacks.push(callback);
$.getJSON(url, function (data) {
while (functionCallbacks.length) {
var thisCallback = functionCallbacks.pop();
thisCallback(data);
}
functionLock = false;
});
}
};
// Usage
getData("api/orders",function(data){
barChart(data);
});
getData("api/orders",function(data){
lineChart(data);
});

Habrá solo una llamada de API y estas dos funciones consumirán el mismo resultado.

Answer 3

He tenido éxito mutex-promise .

Estoy de acuerdo con otras respuestas que quizás no necesites bloquear en tu caso. Pero no es verdad que nunca se necesite bloquear Javascript. Necesita exclusividad mutua al acceder a recursos externos que no manejan concurrencia.

Answer 4

JavaScript es, con unas pocas exceptions ( XMLHttpRequest onreadystatechange handlers en algunas versiones de Firefox) event-loop concurrent . Por lo tanto, no tiene que preocuparse por bloquear este caso.

JavaScript tiene un modelo de concurrencia basado en un "bucle de evento". Este modelo es bastante diferente al modelo en otros lenguajes como C o Java.

...

Un tiempo de ejecución de JavaScript contiene una cola de mensajes, que es una lista de mensajes para procesar. A cada mensaje se asocia una función. Cuando la pila está vacía, se saca un mensaje de la cola y se procesa. El procesamiento consiste en llamar a la función asociada (y así crear un marco de pila inicial). El procesamiento del mensaje finaliza cuando la pila vuelve a estar vacía.

...

Cada mensaje se procesa por completo antes de que se procese cualquier otro mensaje. Esto ofrece algunas buenas propiedades al razonar acerca de su programa, incluido el hecho de que cada vez que se ejecuta una función, no se puede descartar y se ejecutará por completo antes de ejecutar cualquier otro código (y puede modificar los datos que manipula la función). Esto difiere de C, por ejemplo, donde si una función se ejecuta en un hilo, puede detenerse en cualquier punto para ejecutar otro código en otro hilo.

Una desventaja de este modelo es que si un mensaje tarda demasiado en completarse, la aplicación web no puede procesar las interacciones del usuario como hacer clic o desplazarse. El navegador mitiga esto con el diálogo "una secuencia de comandos tarda demasiado en ejecutarse". Una buena práctica a seguir es acortar el proceso de mensajes y, si es posible, reducir un mensaje en varios mensajes.

Para obtener más enlaces sobre concurrencia de bucle de evento, vea E

Answer 5

Lock es una idea cuestionable en JS, que está destinada a ser sin hilos y no necesita protección de concurrencia. Está buscando combinar llamadas en ejecución diferida. El patrón que sigo para esto es el uso de devoluciones de llamada. Algo como esto:

var functionLock = false;
var functionCallbacks = [];
var lockingFunction = function (callback) {
if (functionLock) {
functionCallbacks.push(callback);
} else {
$.longRunning(function(response) {
while(functionCallbacks.length){
var thisCallback = functionCallbacks.pop();
thisCallback(response);
}
});
}
}

También puede implementar esto utilizando detectores de eventos DOM o una solución pubsub.

Answer 6

Los bloqueos son un concepto requerido en un sistema de subprocesos múltiples. Incluso con subprocesos de trabajo, los mensajes se envían por valor entre los trabajadores para que el bloqueo no sea necesario.

Sospecho que solo necesita establecer un semáforo (sistema de marcado) entre sus botones.