如何让我的函数在我的 jQuery 'each' 函数及其包含的所有 AJAX 调用之后触发？

Question

Newb here.我已经尝试了在SO和其他地方找到的多种解决方案。这是我试图遵循的，以确保我的函数在进行所有 ajax 调用之前不会触发。出于某种原因，当我的 updateValues 函数触发时，控制台日志不会返回在我的"第一个"jQuery 每个函数中更新的数据。但是，如果我在第一次后直接再次单击"saveButton"，控制台日志会显示正确的数据，由每个函数更新。我已经遵循了我找到的所有例子，但我被难住了。提前感谢！

$("body").on("click",".saveButton",function(){
var first = $(".item");
var i = 0; 
first.each(function(){
var $this = $(this);
var thisID = $this.find(".itemID").html();
var itemProperties = {'Status': 'New'};
updateListItem(_spPageContextInfo.webAbsoluteUrl,'TestList',thisID,itemProperties,printInfo,logError);
i += 1;
if(i == first.length) {
updateValues();
}
function printInfo()
{
console.log('UPDATED!');
}
function logError(error){
alert("An error occurred.");
console.log(JSON.stringify(error));
}
});
function printInfo(){
console.log('UPDATED!');
}
function logError(error){
alert("An error occurred.");
console.log(JSON.stringify(error));
}
});
function updateValues(){
var url = _spPageContextInfo.siteServerRelativeUrl+
"/_api/lists/getbytitle('TestList')/items?";
$.ajax({
url: url,
method: 'GET',
beforeSend: function (XMLHttpRequest){
XMLHttpRequest.setRequestHeader('Accept', 'application/json; odata=verbose');
},
success: function( data ) {
console.log(data);
$(".itemTwo").each(function(){
var $this =  $(this);
});
}   
}); 
}
function updateListItem(webUrl,listTitle,listItemId,itemProperties,success,failure){
var listItemUri =  webUrl + "/_api/web/lists/getbytitle('" + listTitle + "')/items(" + listItemId + ")";
var itemPayload = {
'__metadata': {'type': "SP.Data.IntakeTESTListItem"}
};
for(var prop in itemProperties){
itemPayload[prop] = itemProperties[prop];
}
updateJson(listItemUri,itemPayload,success,failure);
}
function updateJson(endpointUri,payload, success, error){
$.ajax({       
url: endpointUri,   
type: "POST",   
data: JSON.stringify(payload),
contentType: "application/json;odata=verbose",
headers: { 
"Accept": "application/json;odata=verbose",
"X-RequestDigest" : $("#__REQUESTDIGEST").val(),
"X-HTTP-Method": "MERGE",
"If-Match": "*"
},   
success: success,
error: error
});
}

Answer 1

tl;dr：你运行了两个 ajax 调用，在这种情况下，GET响应比POST请求更快(前面的数据可能更少，或者其他情况(，所以你会在第一时间得到过时的数据。

我希望更长的描述性更强：

您有两个 ajax 调用。第一个POST一些东西，第二个GETPOST请求中更改的东西。不幸的是，它们同时运行。当 js 引擎看到一些 ajax 调用时，它不会等待响应执行下一行，而是继续前进。jquery 的 ajax 调用中的回调会在将来的某个时候当响应返回时被调用。

您可能希望在收到POST的成功(或错误，我不知道用例(后运行GET。因此，您希望在UpdateJson附带响应后调用updateValues函数。使用回调时，它很混乱 - 您必须将updateValue传递给updateJson并在成功时调用它。如果可以，请使用承诺 - 本机fetch API或一些像axios这样的库。它更干净易读。

TIP：你可能不想为每个项目运行 ajax 调用。相反，只运行一个包含所有数据的POST(如果您有这样的端点(和一个GET，然后执行for-each循环来更新前端。

更新我不知道jquery，但我刚刚在链接的问题中看到jquery有when/then方法。使用它们，您可以在其他请求完成后调用下一个 ajax 请求。