¿Puedes esperar la devolución de llamada de JavaScript?

Question

Estoy tratando de usar la biblioteca de diálogo de alertas jQuery de http://abeautifulsite.net/notebook/87 en lugar de las alertas predeterminadas (que en mi opinión parecen bastante horribles). Esta parece ser una gran biblioteca, pero no hay un ejemplo de cómo usar la biblioteca jConfirm.

Necesito hacer algo como esto:

function confirm() {
        var result = false;
        var response = false;
        jConfirm('are you sure?', 'Confirmation Dialog',
          function(r) {
            result = r;
            response = true;
            return r;
        });
        if (response == true) {
            alert(result);
            return result;
        }
        else {
            //wait for response
            alert('hi');
        }
    }

y mi llamada desde mi botón .net:

He publicado un comentario en el sitio web del complemento (solo esta mañana) e hice búsquedas en Google para JavaScript y esperando que se complete una devolución de llamada sin resultados.

¿Alguna idea sobre cómo usar la devolución de llamada correctamente para obtener el resultado, antes de que se ejecute el resto de JavaScript?

Gracias.

Answer 1

jConfirm('are you sure?', 'Confirmation Dialog',
    function(r) {
        result = r;
        response = true;
        return r;
    }
);
if (response == true) {

Esto revela un malentendido de la secuencia de eventos que ocurre usando código asincrónico. El hecho de que lo haya escrito en línea no significa que se ejecutará estrictamente de arriba a abajo.

1. se llama a jConfirm, que recibe una función como uno de sus parámetros, que recuerda.
2. jConfirm muestra su IU en la página y regresa de inmediato.
3. Se ejecuta la línea 'if (respuesta == verdadero)'. Realmente esto debería leer 'if (respuesta)', la comparación booleana es superflua. Pero en cualquier caso, la respuesta es, por supuesto, falsa. Su función se da por vencida y sale, devolviendo el control al navegador.
4. El usuario hace clic en la interfaz de usuario de jConfirm.
5. jConfirm solo ahora salta a la acción y recupera la función que le asignaste y la recordó anteriormente.
6. Su función anidada establece la respuesta verdadera, demasiado tarde para que la condición 'if (respuesta == verdadero)' haga algo con ella.

Ha escrito " // espere respuesta " como alternativa, pero no hay un código JavaScript que pueda escribir que realmente haga eso. Su función debe volver para devolver el control al navegador, antes de que el navegador pueda activar los eventos de clic en la interfaz de usuario jConfirm que hacen que el procesamiento continúe.

Existen formas de hacer que el código asíncrono funcione en un contexto sincrónico (y viceversa), en particular hilos y corutinas (y sus generadores de relación limitada). Pero JavaScript no tiene ninguna de estas características, por lo que debe escribir su código para que se ajuste al modelo síncrono o asíncrono que usa su biblioteca.

Answer 2

Acaba de alcanzar una gran limitación en JavaScript. Una vez que su código ingresa al mundo asincrónico, no hay forma de volver a un flujo de ejecución de procedimiento clásico.

En su ejemplo, la solución sería hacer un bucle esperando que se complete la respuesta. El problema es que JavaScript no proporciona ninguna instrucción que le permita realizar un bucle indefinido sin tomar el 100% de la potencia de procesamiento. Por lo tanto, terminará bloqueando el navegador, a veces hasta el punto en que su usuario no podrá responder la pregunta real.

La única solución aquí es apegarse al modelo asincrónico y mantenerlo. Mi consejo es que debe agregar una devolución de llamada a cualquier función que debe hacer un trabajo asincrónico, para que la persona que llama pueda ejecutar algo al final de su función.

function confirm(fnCallback) 
{
    jConfirm('are you sure?', 'Confirmation Dialog', function(r) 
    {
        // Do something with r 

        fnCallback && fnCallback(r); // call the callback if provided
    });
}

// in the caller

alert('begin');

confirm(function(r)
{
    alert(r);

    alert('end');
})

Answer 3

Dado que la devolución de llamada es asíncrona (al menos, en el sentido de que está esperando que el usuario haga algo), podría ser más fácil manejar lo que necesita dentro de la devolución de llamada:

function confirm() {
    jConfirm('are you sure?', 'Confirmation Dialog', function(r) {
        if (r) doSomething();
    });
}

---

@klogan [comentarios]

Supongo que los obtuvo de aquí ?

La página le da su respuesta: (consulte Uso )

  

Estos métodos no devuelven los mismos valores que confirm () y prompt (). Debe acceder a los valores resultantes utilizando una función de devolución de llamada. (Vea la demostración para más detalles).

---

@klogan

El punto que estoy tratando de hacer es que no hay realmente una manera fácil de lograr lo que quieres. Estás tratando de correlacionar la programación procedimental y basada en eventos , algo que JavaScript no te ayuda a hacer.

La solución más simple (aunque, risky ) es usar un pseudo-infinito-loop. Pero, si nunca se llama a callback , ahora tiene un bucle infinito real. Y, dependiendo del motor de JavaScript, puede matar el navegador en espera.

Punto: Su mejor opción es evitar this tratar de forzar el manejo de eventos en el procedimiento.

function confirm() {
    var result = false;
    var response = false;

    jConfirm('are you sure?', 'Confirmation Dialog',
      function(r) {
        result = r;
        response = true;
    });

    while(!response) continue; // wait
    return result;
}

Answer 4

Técnicamente, sí , pero no haría eso en un sitio web.

Eche un vistazo a JavaScript narrativo , que se basa en Narciso .

  

Narrative JavaScript es una pequeña extensión del lenguaje JavaScript que permite capacidades de bloqueo para devoluciones de llamadas de eventos asíncronos. Esto hace que el código asíncrono sea refrescantemente legible y comprensible.

Selenium utiliza esta tecnología.

---

Actualizar

Consulte JavaScript Hilos :

  

JavaScript Strands agrega corutina y   apoyo cooperativo de subprocesos a la   Lenguaje JavaScript para habilitar el bloqueo   capacidades para eventos asincrónicos   devoluciones de llamada. Esto hace que el código   utiliza mucho la operación asincrónica   más lineal, legible y manejable.   Strands está construido sobre Narrativa   JavaScript escrito por Neil Mix, y   gran parte de JavaScript narrativo tiene   permaneció en Strands incluyendo gran parte de   esta documentación.

     

En JavaScript su código no puede simplemente   espere hasta que se active un evento: el   el evento siempre debe ser manejado por un   controlador de eventos asíncrono separado.   A veces esto está bien, pero a menudo   obliga a lo que debería ser un simple   secuencia de declaraciones en retorcidas   contorsiones También rompe el   capacidad de encapsular funcionalidad   porque las funciones de llamada deben saber   proporcionar un controlador de devolución de llamada. Hebras   proporciona la capacidad de suspender y   reanudar hilos de ejecución. Ejecución   puede suspender la reanudación cuando el evento es   terminado. Esto te permite escribir   evento asincrónico difícil de leer   manejo en simple, lineal, legible   código que encapsula la implementación.

Answer 5

Supongo que tendrías que obtener la respuesta de esta manera. No creo que necesites una devolución de llamada.

function confirm() {
        var response = jConfirm('are you sure?', 'Confirmation Dialog');
        if (response) {
            alert(result);
        }
        else {
            //wait for response
            alert('hi');
        }
    }

Answer 6

Creo que he encontrado una posible solución a este problema. Estaba leyendo este artículo: http://treasure4developer.wordpress.com/2008 / 06/23 / calling-postback-event-from-javascript /

Básicamente, la idea es forzar la devolución de datos desde javascript, al principio descubrí que la devolución de datos funcionaría pero no llamaría a mi evento de botón, pero después de leer el artículo descubrí que podía detectar si era una devolución de datos de JavaScript y simplemente llame a un método para hacer el procesamiento

Saludos a DotnetShadow

Answer 7

¡Cómo dijeron los tipos, no hay forma! pero ... como solíamos decir en mi país (Brasil), le gambi:

podemos hacer algo así:

<h:commandLink styleClass="linkValor xExcluir" value="x"  
                     onclick="if(confirmar('Confirmar excluir.','Deseja realmente excluir este registro?', this)) return true; else return false;"
                     action="#{mBeanPesquisarLinhas.excluir}"/>

y el javascript:

function confirmar(titulo, msg, elemento) { 

    if ($(elemento).attr('sim')) {      
        $(elemento).removeAttr('sim');      
        return true;
    } else if ($(elemento).attr('nao')) {       
        $(elemento).removeAttr('nao');      
        return false;
    } else {
        $("#dialog-confirm").html('<p>' + msg + '</p>').dialog({
            resizable : false,
            height : 200,
            modal : true,
            title : titulo,
            buttons : {
                "Sim" : function() {
                    $(this).dialog("close");
                    $(elemento).attr('sim', 'sim');
                    $(elemento).click();
                },
                "Não" : function() {
                    $(this).dialog("close");
                    $(elemento).attr('nao', 'nao');
                    $(elemento).click();
                }
            }
        });
    }

    return false;
}

es el mismo problema pero usando jquery-ui.

Adiós y espero que esto pueda ayudar a alguien.

Answer 8

Piense en las devoluciones de llamada como mensajes de envío y dará como resultado una mejor estructura en su código.

Answer 9

Esta cosa funciona. Necesita jQuery.

function myconfirm(kyssa, elm, e){ // neG
    if(jQuery('#confirmquestion').data('result')){
        var V = jQuery('#confirmquestion').data('result');
        jQuery('#confirmquestion').remove(); 
        return V == 'Y' ? true : false;         
    }else if(!jQuery('#confirmquestion').length){
        jQuery('body').append('<div id="confirmquestion">'+
        '<h4>Kinnitus</h4>'+
        '<div id="kyssa">'+kyssa+'</div>'+
        '<center>'+
        '<button onclick="jQuery(\'#confirmquestion\').data(\'result\', \'Y\');">Jah</button>&nbsp;'+
        '<button onclick="jQuery(\'#confirmquestion\').data(\'result\', \'N\');">Ei</button></div>'+
        '</center>');
        jQuery('#confirmquestion button').click(function(){
            jQuery(elm).trigger(e.type);
        })
    }       
    return false;
}

onChange="if(myconfirm(\'Saada kiri: \'+jQuery(this).find(\'option:selected\').html()+\' ?\', this, event)) { ... }"

CSS

#confirmquestion{
    border:1px solid #999;
    background:white;
    padding-bottom: 30px;
    position:fixed;
    width:300px;
    font-size:12px;
    top:45%;
    left:50%;
    margin-left:-150px;
}

#confirmquestion h4 {
    background:blue;
    color:white;
    margin:0;
    padding: 2px 5px;
    border-bottom:#777; 
    text-align:center;
}

#confirmquestion #kyssa {
    padding: 30px 25px;
}