Question

我正在创建一个应用程序，允许人们从列表拖动到插槽，然后该插槽可以在其中接受几个子项目，例如A-1，A-2，...

所有这些交互都是通过jQuery UI的draggable和droppable完成的，但是最后，该函数被调用，其中包含一个Ajax调用，以加载Slot和这是子项。

请务必注意，所有子项目都取决于广告位。

据我所知，我已经尝试在$(document).ready()上模拟输入，并且由于ajax和功能默认情况下是异步的，因此某些操作速度更快，更慢，并且某些子项失败，因为Slot未在以下位置更新那一点。

我试图通过进行这些函数调用async并等待这些函数来解决此问题，即使调用以正确的顺序进行，这也根本不起作用。

第二个ajax调用对第一个的依赖关系与第一个调用具有第一个调用所需的特定数据属性的第一个元素有关，由于某种原因，尽管从技术上讲不应如此，但始终未定义。我将在下面的示例中对此进行进一步解释：

我使用这种设置（它非常简化，但是应该可以理解）：

$(document).ready(function(){
    LoadDemo();
    //...
}); 

async function LoadDemo()
{
    await LoadSlots();
    await LoadSubitems();
}

async function LoadSlots()
{
    LoadSlot(x,y,z);
    LoadSlot(x,y,z);
    LoadSlot(x,y,z);
}
async function LoadSubitems()
{
    LoadSubitem(x,y,z,$(".Slot"))
    LoadSubitem(x,y,z,$(".Slot"))
    LoadSubitem(x,y,z,$(".Slot"))
}

现在，在LoadSlot ajax中调用一个PHP脚本，该脚本生成将HTML插入插槽中的HTML脚本。该HTML还包含必需的数据属性。为了100％确保将数据信息也加载到jQuery中（因为我听说由于某些原因可能存在一些问题），我在LoadSlot()调用中手动更新了数据，如下所示：

$(name).data("name",$(name).attr("data-name"));

我已经跟踪了调试，并可以确认当调用$(name).attr("data-name"时不是未定义/空并且具有正确的值，这意味着在此之后，数据也应该，但是直到所有JavaScript完成后才可以处理中，数据仍未定义。

此外，即使添加了SubItems的功能出现在Slot调用之后，但一旦出现Ajax错误警告，DOM仍不包含该点应有的HTML，例如在处理所有代码之前就被卡住了，即使不应该。

初始javascript结束后，我关闭了所有警报，然后可以从列表中进行拖放（再次执行相同的操作，调用LoadSlot()或LoadSubitem()，效果很好。

所以问题基本上是这样的：在调用LoadSlots()之前，如何确保使用LoadSubitems()中的信息正确地更新DOM？

Answer 1

问题在于您没有在await()中使用LoadSlots()，因此它没有等待AJAX调用完成。

async function LoadSlots()
{
    await LoadSlot(x,y,z);
    await LoadSlot(x,y,z);
    await LoadSlot(x,y,z);
}

当然，这意味着您必须将LoadSlot()编码为适当的异步函数。如果它调用$.ajax()，则可以使它返回该调用，因为它返回了一个Promise。

如果您不希望每个LoadSlot()呼叫都等待上一个呼叫结束，则可以使用Promise.all()：

async function LoadSlots() {
    await Promise.all([LoadSlot(x, y, z), LoadSlot(x, y, z), LoadSlot(x, y, z)]);
}

在第一次Ajax调用之后，DOM不会在依赖于第一次

1 个答案: