链接的 jQuery ajax 调用以错误的顺序触发

Question

我有一个选择列表。每个选项都是一组短文本。选择特定捆绑包时，文本将显示在两个表格中。每行都有一个“删除”图标，以便可以从包中删除文本。我希望表和选择列表在删除后刷新。共有三个链式调用：

1. 从数据库中删除文本>>

2. 刷新选择列表并在自定义标签中转储一些数据>>

3. 从自定义标签中获取数据并重建表

但他们似乎按 3 >> 1 >> 2 的顺序开火。我试图重现的解决方案是 this。我做错了什么？

感谢您的帮助！

~~~~~~~~~~~~~

更新

1 和 2 肯定是按顺序执行的（请参阅screenshot）。问题在于 3（'createSegTableRows'）。这是不调用服务器的那个。

~~~~~~~~~~~~~

这是代码。 （损坏的位是第一个sn-p中的最后一个块。）

sn-p 1：当从选择列表中选择一个选项时触发：

// This fires when a bundle is selected.
function selectBundle() {

  createSegTableRows();
  rowIconActions();

  // this creates some rows for a couple of tables
  function createSegTableRows() {

    // get "value" from the currently selected option
    var bundle_id = $('select#bundleSelector').find(':selected').prop('value');

    // get some strigified JSON data stored in a custom tag
    var inTagData = $('select#bundleSelector').find(':selected').attr('data');
    // convert back to a JSON object
    var inTagData_parsed = JSON.parse(inTagData);

    // convert some data from inside the JSON object to HTML table rows 
    var st_table_contents = tableRows(inTagData_parsed.st);
    var tt_table_contents = tableRows(inTagData_parsed.tt);

    // populate the tables
    $('#st_seg_table').html(st_table_contents);
    $('#tt_seg_table').html(tt_table_contents);

    // this converts JSON data into table rows
    function tableRows(rObj) {

      // map to array and sort
      var rArray = $.map(rObj, function(el) {
        return el;
      });
      rArray.sort(function(a, b) {
        return a.join_id > b.join_id;
      });

      //	create rows	
      var rows = ""
      for (i = 0; i < rArray.length; i++) {
        var segment_id = rArray[i]['segment_id'];
        var join_id = rArray[i]['join_id'];
        var segment_text = rArray[i]['seg_text'];

        // each row has some text and Up/Down/Delete buttons
        rows += "<tr><td class='sid tt'>" + segment_id + " <a title='Up' jid='" + join_id + "'>&#9650</a><a title='Down' jid='" + join_id + "'>&#9660</a> <a title='Remove' jid='" + join_id + "'>&#10005</a> </td><td>" + segment_text + "</td></tr>";
      }

      return rows;
    }
    console.log("some table rows");
  }

  // actions fired by Up/Down/Delete in each row
  function rowIconActions() {

    // find selected option in a <select> list
    var bundle_id = $('select#bundleSelector').find(':selected').prop('value');

    // attach an action to the Delete buttons in each table row 
    $('td.sid>a[title="Remove"]').click(function() {

      var join_id = $(this).attr('jid');
      var role = $(this).parent().prop('className').split(" ")[1];

      // THIS IS THE BIT THAT DOESN'T WORK
      if (join_id && bundle_id) {
        $.post(
          // delete record in db
          'ajax/bundle_delete_join.php', {
            bid: bundle_id,
            jid: join_id
            // rebuild <select> list
          }).then(function() {
          return bundleSelector();
          console.log("some stuff");
          // rebuild tables
        }).done(function() {
          createSegTableRows();
          console.log("done");
        });
      }
    });
  }
}

sn-p 2：这会重新填充选择列表：

// This repopulates the select list.
function bundleSelector() {

  if ($("#pairButton").text("Unpair")) {
    var pid = $("#pairButton").attr("pairid");
  }

  $.post(
    // collect some criteria and retrieve stuff from db
    'ajax/bundle_selector.php', {
      st: $("#txtId_left").html(),
      tt: $("#txtId_right").html(),
      pair: pid,
      filter_st: $('#bundleFilterCheck_st').prop('checked'),
      filter_tt: $('#bundleFilterCheck_tt').prop('checked'),
      filter_pair: $('#bundleFilterCheck_pair').prop('checked')
    },
    function(data) {

      if (data) {

        // convert results to a JSON object
        var dataObj = JSON.parse(data);

        // create a variable for the options
        var options = '';

        if (dataObj != "") {

          // loop through the JSON object...
          Object.keys(dataObj).forEach(key => {

            var bundle_id = key;
            var role = dataObj[key];

            options = options + "<option value='" + bundle_id + "' data='" + JSON.stringify(role) + "'>bundle " + key;

            // loop some more...
            Object.keys(role).forEach(key => {

              if (role[key] && key != 'comment' && JSON.stringify(role[key]) != '[]') {

                options = options + " | " + key + ":";

                var segment_id = role[key];

                // convert to an array for sorting
                var joinDataArray = $.map(segment_id, function(el) {
                  return el;
                });

                // sort the array
                joinDataArray.sort(function(a, b) {
                  return a.join_id > b.join_id;
                });

                // loop through the array
                for (i = 0; i < joinDataArray.length; i++) {

                  var sid = joinDataArray[i]['segment_id'];

                  options = options + " " + sid;

                }
              }
            });
            // add a closing tag to each option
            options = options + "</option>";
          });
          // populate parent element
          $('select#bundleSelector').html(options);
          console.log("some select options");

        } else {
          // if there are no results...
          $('select#bundleSelector').html("");
          $('table#st_seg_table').html("");
          $('table#tt_seg_table').html("");
          $('textarea#bundle_comment').html("");
        }
      } else {
        // and again
        $('select#bundleSelector').html("");
        $('table#st_seg_table').html("");
        $('table#tt_seg_table').html("");
        $('textarea#bundle_comment').html("");
      }
    }
  );
}

Answer 1

这里的关键在于理解bundleSelector()是异步的。

在“不起作用的位”中，您正确地return bundleSelector();，但该函数返回undefined。为了在bundleSelector() 完成后运行某些东西，它必须返回一个承诺，并且为了让createSegTableRows() 按预期工作，该承诺不仅必须在其$.post() 返回时履行，而且在所有选项构建时都必须履行完成了。

要实现这一点，bundleSelector() 的 $.post(..., fn) 调用必须修改为return $.post(...).then(fn)，否则调用者将不会等待选项构建完成，然后继续createSegTableRows() ;因此您报告的 3-1-2 执行顺序。