Wie kann ich eine JavaScript-Funktion ausführen, nachdem ein anderer die Versprechungen abgeschlossen hat?

Question

Ich möchte die Seite aktualisieren, nachdem Werte in einer Datenbank gespeichert wurden, mit js Versprechen.

Mein Code ist in einem jQuery-Ereignis-Listener eingewickelt:

$("img[class=okButton]").click(function(){ 
    var field_userid = $(this).attr("id"); 

    doThisFirst(); 

    // then make a promise 
    const wait = ms => new Promise(resolve => setTimeout(resolve, ms)); 
    wait(500).then(() => writeNewRoom(field_userid)); // function to write to database 

    refreshPage(); // after write has finished 
}); 

/////////////////// 

function writeNewRoom(field_userid)){ 
// ajax to do something; 
} 

/////////////////// 

function refreshPage(){ 
if(window.confirm("Click to refresh")){location = location} 
} 

Das gewünschte Verhalten ist zunächst Daten zu verarbeiten, dann zu beenden, bevor in der writeNewRoom() Funktion „etwas zu tun“, um die Seite in der refreshPage erfrischend () Funktion.

Was tatsächlich passiert, ist, dass die erste doThisFirst() - Funktion korrekt verarbeitet wird, aber dann erscheint das window.confirm-Feld in der dritten Funktion, BEVOR die writeNewRoom-Funktion ausgeführt wurde.

Ich habe noch nie zuvor Versprechungen verwendet, also kann jemand helfen herauszufinden, was schief gelaufen ist? Ich nahm die grundlegende Syntax von der Mozilla-Website: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises

Jede Hilfe wird sehr geschätzt.

Answer 1

In Ihrem Fall möchten Sie einen Anruf zurück in Ihre writeNewRoom() Methode setzen.

Zum Beispiel rufen Sie, was Sie tun müssen, auf die .click() Funktion und setzen Sie eine .done() Methode, wenn Ihr Ajax Aufruf zum Schreiben in die Datenbank erfolgt ist.

$("img[class=okButton]").click(function(){ 
    var field_userid = $(this).attr("id"); 

    doThisFirst(); 

    // Remove the Promise 
    writeNewRoom(field_userid); // function to write to database 
}); 

function writeNewRoom(field_userId) { 
    $.ajax({ 
     url: "/someurl", 
     method: "method", 
     data: { 
      a: field_userId 
     } 
    }).done(function(data) { 
     console.log('success', data) 
     refreshPage(); // This is where you refresh the page. 
    }).fail(function(xhr) { 
     console.log('error', xhr); 
    }); 
} 

Answer 2

Wenn Ihr // ajax to do something; kehrt ein Versprechen (jQuery.ajax() der Fall ist) Sie es wie folgt tun:

wait(500).then(() => writeNewRoom(field_userid)) 
     .then(() => refreshPage()); 

Es gibt auch eine zusätzliche Klammer hier function writeNewRoom(field_userid))

Answer 3

wenn die writeNewRoom(field_userid) ist Wenn Sie einen Ajax-Aufruf ausführen, setzen Sie die refreshPage()-Funktion in den Callback des Ajax-Aufrufs, so dass sie ausgeführt wird, NACHDEM der Ajax beendet wurde, zB:

function writeNewRoom(field_userid)){ 

    $.ajax({ 
     url: "someUrl", 
     type: 'GET', 
     success: (result) => { 
      refreshPage() //when ajax has succeded, refresh page 
     }, 
     error: (err) => { 
     //do something else 

     } 
    }); 

}