Puoi aspettare il callback di JavaScript?

Question

Sto cercando di utilizzare la libreria di dialogo degli avvisi jQuery da http://abeautifulsite.net/notebook/87 invece degli avvisi predefiniti (che a mio avviso sembrano piuttosto orribili). Questa sembra essere un'ottima libreria, ma non esiste un esempio di come utilizzare la libreria jConfirm.

Devo fare qualcosa del genere:

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');
        }
    }

e la mia chiamata dal mio pulsante .net:

Ho pubblicato un commento sul sito Web del plug-in (proprio stamattina) e fatto ricerche su Google per javascript e in attesa del completamento di una richiamata senza risultati.

Qualche idea su come utilizzare correttamente il callback per ottenere il risultato, prima che il resto del javascript venga eseguito?

Grazie.

Answer 1

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

Questo tradisce un malinteso sulla sequenza di eventi che si verifica usando il codice asincrono. Solo perché l'hai scritto in linea non significa che verrà eseguito rigorosamente dall'alto verso il basso.

1. viene chiamato jConfirm, che riceve una funzione come uno dei suoi parametri, che ricorda.
2. jConfirm visualizza la sua interfaccia utente sulla pagina e ritorna immediatamente.
3. Viene eseguita la riga 'if (response == true)'. In realtà questo dovrebbe solo leggere 'if (response)', il confronto booleano è superfluo. Ma in ogni caso la risposta è ovviamente falsa. La tua funzione si arrende ed esce, restituendo il controllo al browser.
4. L'utente fa clic sull'interfaccia utente di jConfirm.
5. jConfirm solo ora passa all'azione e richiama la funzione che gli hai dato e che ha ricordato in precedenza.
6. La tua funzione nidificata imposta la risposta su true, troppo tardi perché la condizione 'if (response == true)' possa fare qualcosa con essa.

Hai scritto " // attendi la risposta " in alternativa, ma non esiste un codice JavaScript che puoi scrivere che lo farà effettivamente. La tua funzione deve tornare per restituire il controllo al browser, prima che il browser possa attivare gli eventi clic sull'interfaccia utente jConfirm che fanno procedere l'elaborazione.

Esistono modi per far funzionare il codice asincrono in un contesto sincrono (e viceversa) - in particolare thread e coroutine (e i loro generatori di relazioni limitate). JavaScript non ha nessuna di queste funzionalità, quindi è necessario scrivere il codice per adattarlo al modello sincrono o asincrono utilizzato dalla libreria.

Answer 2

Hai appena raggiunto un grosso limite in JavaScript. Una volta che il tuo codice entra nel mondo asincrono, non c'è modo di tornare a un classico flusso di esecuzione procedurale.

Nel tuo esempio, la soluzione sarebbe quella di creare un ciclo in attesa che la risposta sia riempita. Il problema è che JavaScript non fornisce alcuna istruzione che ti permetterà di eseguire un ciclo indefinito senza prendere il 100% della potenza di elaborazione. Quindi finirai per bloccare il browser, a volte al punto in cui il tuo utente non sarà in grado di rispondere alla domanda reale.

L'unica soluzione qui è attenersi al modello asincrono e mantenerlo. Il mio consiglio è di aggiungere un callback a qualsiasi funzione che deve svolgere un lavoro asincrono, in modo che il chiamante possa eseguire qualcosa al termine della funzione.

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

Poiché il callback è asincrono (almeno, nel senso che sta aspettando che l'utente faccia qualcosa), potrebbe essere più semplice gestire ciò che è necessario all'interno del callback:

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

---

@klogan [commenti]

Presumo che tu li abbia presi da qui ?

La pagina ti dà la tua risposta: (guarda sotto Utilizzo )

  

Questi metodi non restituiscono gli stessi valori di confirm () e prompt (). È necessario accedere ai valori risultanti utilizzando una funzione di richiamata. (Vedi la demo per maggiori dettagli.)

---

@klogan

Il punto che sto cercando di sottolineare è che non esiste davvero un modo semplice per ottenere ciò che desideri. Stai cercando di correlare la programmazione procedurale e basata sugli eventi - qualcosa che JavaScript non ti aiuta a fare.

La soluzione più semplice (sebbene, risky ) è usare un ciclo pseudo-infinito. Ma se callback non viene mai chiamato, ora hai un vero e proprio loop infinito. E, a seconda del motore JavaScript, potresti interrompere l'attesa del browser.

Punto: La tua migliore scommessa è di evitare questo cercando di forzare gli eventi guidati in procedurali.

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

Tecnicamente, sì , ma non lo farei su un sito Web.

Dai un'occhiata a Narrative JavaScript , che si basa su Narcissus .

  

JavaScript narrativo è una piccola estensione del linguaggio JavaScript che abilita le funzionalità di blocco per i callback di eventi asincroni. Questo rende il codice asincrono leggibile e comprensibile in modo rinfrescante.

Selenium utilizza questa tecnologia.

---

Aggiornamento

Scopri JavaScript filoni :

  

JavaScript Strands aggiunge coroutine e   supporto di threading cooperativo al   Linguaggio JavaScript per abilitare il blocco   capacità per evento asincrono   callback. Questo rende questo codice   utilizza molto l'operazione asincrona   più lineare, leggibile e gestibile.   Strands è basato sulla narrativa   JavaScript scritto da Neil Mix e   gran parte di JavaScript narrativo ha   rimase in fili compreso gran parte di   questa documentazione.

     

In JavaScript il tuo codice non può semplicemente   attendere fino a quando un evento è stato generato: il   l'evento deve essere sempre gestito da a   gestore di eventi asincrono separato.   A volte va bene, ma spesso   forza quello che dovrebbe essere un semplice   sequenza di affermazioni in nodoso   contorsioni. Si rompe anche il   capacità di incapsulare funzionalità   perché le funzioni di chiamata devono saperlo   fornire un gestore di callback. Strands   offre la possibilità di sospendere e   riprendere i thread di esecuzione. Esecuzione   può sospendere il ripristino quando l'evento è   finito. Questo ti permette di scrivere   evento asincrono di difficile lettura   gestione in modo semplice, lineare, leggibile   codice che incapsula l'implementazione.

Answer 5

Suppongo che dovresti prendere la risposta in questo modo. Non penso che tu abbia bisogno di una richiamata.

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

Answer 6

Penso di aver trovato una possibile soluzione a questo problema. Stavo leggendo questo articolo: http://treasure4developer.wordpress.com/2008 / 06/23 / chiama-postback-evento-da-javascript /

Fondamentalmente l'idea è di forzare il postback da javascript, all'inizio ho scoperto che il postback avrebbe funzionato ma non avrebbe chiamato il mio evento pulsante, ma dopo aver letto l'articolo ho scoperto che avrei potuto rilevare se fosse il postback javascript e basta chiamare un metodo per eseguire l'elaborazione

Saluti DotnetShadow

Answer 7

Come dicevano i tizi, non c'è modo! ma ... come diciamo nel mio paese (Brasile), le gambi:

possiamo fare qualcosa del genere:

<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}"/>

e il 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;
}

è lo stesso problema ma usando jquery-ui.

Ciao e spero che questo possa aiutare qualcuno.

Answer 8

Pensa ai callback come all'invio di messaggi e si tradurrà in una migliore struttura del tuo codice.

Answer 9

Questa cosa funziona. Ha bisogno di 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;
}