链式jQuery ajax调用顺序错误 [英] chained jQuery ajax calls firing in wrong order
问题描述
我有一个选择列表.每个选项都是一堆简短的文本.选择特定的包时，文本将显示在两个表中.每行都有一个删除"图标，以便可以从文本包中删除文本.我希望表和选择列表都在删除后刷新.有三个链接的呼叫:
I have a select list. Each option is a bundle of short texts. When a specific bundle is selected, the texts are displayed in two tables. Each row has a "Delete" icon, so that a text can be removed from the bundle. I want both the tables and the select list to refresh after deletion. There are three chained calls:
-
从db >>中删除文本>>
delete text from db >>
刷新选择列表并将某些数据转储到自定义标签>>
refresh select list and dump some data in a custom tag >>
从自定义标签获取数据并重建表格
get data from custom tag and rebuild tables
但是它们似乎按照3 >> 1 >> 2的顺序触发.我尝试重现的解决方案是
But they seem to be firing in the order 3 >> 1 >> 2. The solution I am trying to reproduce is this. What am I doing wrong?
谢谢您的帮助！
~~~~~~~~~~~~~
~~~~~~~~~~~~~
更新
1和2肯定是顺序执行的(请参阅屏幕截图).问题出在3('createSegTableRows').这是不打给服务器的电话.
1 and 2 are definitely executing sequentially (see screenshot). The problem is with 3 ('createSegTableRows'). This is the one that does NOT make a call to the server.
~~~~~~~~~~~~~
~~~~~~~~~~~~~
这是代码. (折断的位是第一个代码段中的最后一个块.)
Here's the code. (The broken bit is the last block in the first snippet.)
片段1:从选择列表中选择一个选项时会触发:
snippet 1: This fires when an option is selected from the select list:
// 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 + "'>▲</a><a title='Down' jid='" + join_id + "'>▼</a> <a title='Remove' jid='" + join_id + "'>✕</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");
});
}
});
}
}
代码段2:这将重新填充选择列表:
snippet 2: This repopulates the select list:
// 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("");
}
}
);
}
推荐答案
此处的关键在于理解bundleSelector()是异步.
The key here lies in understanding that bundleSelector() is asynchronous.
在无效的位"中，您正确地return bundleSelector();，但是该函数返回了undefined.为了使bundleSelector()完成后能够运行某些内容，它必须返回一个保证，并且为了使createSegTableRows()能够按预期工作，该保证不仅必须在它的$.post()返回时而且还必须在所有选项构建时实现.完成.
In "THE BIT THAT DOESN'T WORK" you correctly return bundleSelector(); but that function returns undefined. In order for something to run after bundleSelector() has completed, it must return a promise and, for createSegTableRows() to work as expected, that promise must fulfill not only when its $.post() has returned but also when all the option-building is complete.
要实现此目的，必须将bundleSelector()的$ .post(...，fn)调用修改为return $.post(...).then(fn)，否则，调用者将不等待选项构建完成后再继续进行createSegTableRows() ;因此您报告的是3-1-2执行顺序.
To achieve that, bundleSelector()'s $.post(..., fn) call must be modified to return $.post(...).then(fn), otherwise the caller will not wait for the option-building to complete before proceeding to createSegTableRows(); hence the 3-1-2 execution order you report.
这篇关于链式jQuery ajax调用顺序错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
