約束事を使って別の機能が完了した後にJavascript機能を実行するには？

Question

値をデータベースに保存した後、js約束を使ってページを更新したいとします。私のコードはjQueryのイベントリスナー内にラップされ

：

$("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} 
} 

意図した動作が最初のデータを処理することで、その後、（refreshPageでページを更新する前にwriteNewRoom（）関数で「何かをする」を完了） 関数。

実際には、最初のdoThisFirst（）関数は正しく処理されていますが、3番目の関数のwindow.confirmボックスは、writeNewRoom関数が実行される前にポップアップします。

これまで私は約束を使用したことがないので、何が問題になったのかを誰でも理解できますか？私はmozillaのウェブサイトから基本的な構文を取った：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises

何か助けが大変ありがとう。

Answer 1

あなたの場合、writeNewRoom()メソッドでコールバックを行いたいと思うでしょう。

たとえば、.click()関数で必要な処理を呼び出し、.done()メソッドを呼び出して、データベースへの書き込みのためのajax呼び出しが完了したときにメソッドを呼び出します。

$("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

あなた// ajax to do something;が約束を返した場合（jQuery.ajax（）がない）あなたはこのようにそれを行うことができます。

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

writeNewRoom(field_userid)がある場合は、1つの余分な括弧がここfunction writeNewRoom(field_userid))

Answer 3

もありますajax呼び出しを実行すると、refreshPage()関数をajax呼び出しのコールバックに入れます。したがって、ajaxが終了した後に実行されます。例：

function writeNewRoom(field_userid)){ 

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

     } 
    }); 

}