Question

我希望在使用js promises将值保存到数据库后刷新页面。

我的代码包含在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}
}

预期的行为是首先处理数据，然后完成＆＃34;做某事＆＃34;在refreshNewRoom（）函数中刷新refreshPage（）函数之前的页面。

实际发生的是第一个doThisFirst（）函数被正确处理，但是第三个函数中的window.confirm框在writeNewRoom函数运行之前弹出。

我之前从未使用过承诺，所以有人可以帮助弄清楚出了什么问题吗？我从mozilla网站上获取了基本语法：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises

非常感谢任何帮助。

Answer 1

在您的情况下，您可能希望在writeNewRoom()方法中回拨一次。

例如，您可以在.click()函数上调用您需要执行的操作，并在完成写入数据库的ajax调用时放置.done()方法。

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

这里还有一个额外的括号function writeNewRoom(field_userid))

Answer 3

如果writeNewRoom(field_userid)正在进行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

       }
   });

}

如何在完成使用promises之后执行Javascript函数？

3 个答案: