javascript - 在.then()之前执行的函数

目标：如果html元素的数量超过现有JSON文件的数组，则使用JSON创建数组。然后，获取每个数组的.length并将其添加到将附加到html的btn上。我有一个脚本，该脚本首先检测页面上有多少postWrapper个元素，然后循环遍历它们，并确定comments，likes和views（存储三个外部JSON文件的三个变量）是否都具有每个索引的postWrapper元素都有一个对应的数组。如果该数组在一个JSON文件中不存在，则postArray()函数进行$.ajax调用，并且php将一个空数组写入每个JSON文件的末尾。然后您会看到我使用.push([])向现有的comments，likes和views变量添加一个空数组，以便它们也反映更新的JSON文件。我正在使用.then()确保其中某些功能是同步执行的。在更新JSON文件并将空数组推入现有js变量之后，我需要借助postWrapper函数将按钮附加到injectBtn()元素。此函数读取comments，likes和views变量以确定数组的.length，然后添加一个计数（如果需要）。我面临的问题是，如果这三个JSON文件之一没有足够数量的数组，则postArray()函数似乎已成功执行（因此JSON文件已更新），但是获得方法在.push([])尝试执行并获取新创建的数组的injectBtn()之前不会更新。然后，我遇到了以下错误：  jQuery.Deferred异常：无法读取未定义Type的属性“ includes”：无法读取未定义的属性“ includes”如何解决此问题，以便在.length尝试读取其中包含的数组的comments之前更新JSON文件以及likes，views和injectBtn()变量？我的代码在下面（至少我认为相关的部分）。如果您有任何疑问或需要更多背景信息，请告诉我。 var postArray = function() { return $.ajax({ type: "post", url: "/php/api.php", dataType: "text", data: { array: "new" } }); } var injectBtns = function(element, index) { $(element[index]).append( "<a class='js comment btn' href='#' title='Comment'>" + "<span class='js comment count'>" + comments[index].length + "</span>" + "<svg class='icon' width='16px' height='16px' viewbox='0 0 16 16'>" + "<use xlink:href='/assets/icons.svg#comments'></use>" + "</svg>" + "</a>" + "<a class='js like btn' href='#' title='Like'>" + "<span class='js like count'>" + likes[index].length + "</span>" + "<svg class='icon' width='16px' height='16px' viewbox='0 0 16 16'>" + "<use xlink:href='/assets/icons.svg#likes'></use>" + "</svg>" + "</a>" + "<a class='js view btn' href='#' title='Like'>" + "<span class='js view count'>" + views[index].length + "</span>" + "<svg class='icon' width='16px' height='16px' viewbox='0 0 16 16'>" + "<use xlink:href='/assets/icons.svg#views'></use>" + "</svg>" + "</a>" ); } var postWrapper = $(".js.post.wrapper"), commentBtn = ".js.comment.btn", likeBtn = ".js.like.btn", viewBtn = ".js.view.btn"; for (var i = 0; i < $(postWrapper).length; i++) { (function(index) { if (typeof comments[index] === "undefined" || typeof likes[index] === "undefined" || typeof views[index] === "undefined") { postArray().then(function() { comments.push([]); likes.push([]); views.push([]); injectBtns(postWrapper, index); }); } else { injectBtns(postWrapper, index); } })(i); if (comments[i].includes(client)) { $(postWrapper[i]).children(commentBtn).addClass("active"); } if (likes[i].includes(client)) { $(postWrapper[i]).children(likeBtn).addClass("active"); $(postWrapper[i]).children(likeBtn).prop("title", "Unlike"); } if (views[i].includes(client)) { $(postWrapper[i]).children(viewBtn).addClass("active"); } } (adsbygoogle = window.adsbygoogle || []).push({}); 最佳答案 如何解决此问题，以便在injectBtn（）尝试读取其中包含的数组的.length之前，更新我的JSON文件和注释，喜欢和视图变量？您还需要将它们放在then回调中。for (var i = 0; i < $(postWrapper).length; i++) { (function(i) { var promise = (typeof comments[i] === "undefined" || typeof likes[i] === "undefined" || typeof views[i] === "undefined") ? postArray().then(function() { comments.push([]); likes.push([]); views.push([]); }) : $.when(undefined); promise.then(function() { injectBtns(postWrapper, i); if (comments[i].includes(client)) { $(postWrapper[i]).children(commentBtn).addClass("active"); } if (likes[i].includes(client)) { $(postWrapper[i]).children(likeBtn).addClass("active"); $(postWrapper[i]).children(likeBtn).prop("title", "Unlike"); } if (views[i].includes(client)) { $(postWrapper[i]).children(viewBtn).addClass("active"); } }); })(i);}注意，整个方法非常可怕为了防止出现竞争情况，您不仅应该请求“创建一个新数组（在末尾）”，而且还应该“在位置i处创建一个数组（如果尚不存在）”。而不是发出多个请求（每个丢失的数组一个请求），您应该发出一个具有预期数组数量（即postWrapper.length）的简单请求。然后，PHP脚本应生成尽可能多的脚本。您根本不应该为此使用客户端脚本，甚至不应该接受进行单独评论/赞/查看部分的请求（这是巨大的安全风险）。 php服务器应该知道哪个页面上有多少帖子，并首先使用正确数量的数组提供json服务。 (adsbygoogle = window.adsbygoogle || []).push({});