javascript - 单击一堆需要等待 Ajax 调用才能继续使用 Greasemonkey 的按钮

Question

我有一个 HTML 结构，本质上类似于我在下面提供的示例。我正在尝试迭代每个 li使用jquery的.each()工作正常。然后我想尝试单击每个也有效的“购买”按钮。

这就是斗争开始的地方。单击“购买”时，会进行 AJAX 调用来检查该商品是否仍然可用，然后显示确认 div(确认 div 见下面的代码)。然后，我想单击"is"来确认交易(此处已经有触发器工作)。在继续下一步之前li但是我需要再次等待这个 ajax 调用完成。

有没有办法正确解决这个问题？

网站上的基本 HTML 设置:

<ul>
    <li>
        <div class="item-name">Some item</div>
        <span class="buy-item">Buy</span>
        <div class="confirm-buy"></div>  //EMPTY UNTIL AJAX DONE, when Done this div is filled
        <div class="success-buy"></div>  //EMPTY UNTIL AJAX DONE for buy confirmation, when Done this div is filled
    </li>
    <li>
        <div class="item-name">Some item</div>
        <span class="buy-item">Buy</span>
        <div class="confirm-buy"></div>  //EMPTY UNTIL AJAX DONE, when Done this div is filled
        <div class="success-buy"></div>  //EMPTY UNTIL AJAX DONE for buy confirmation, when Done this div is filled
    </li>
    <li>
        <div class="item-name">Some item</div>
        <span class="buy-item">Buy</span>
        <div class="confirm-buy"></div>  //EMPTY UNTIL AJAX DONE, when Done this div is filled
        <div class="success-buy"></div>  //EMPTY UNTIL AJAX DONE for buy confirmation, when Done this div is filled
    </li>
</ul>

Javascript(示例，可能与上面的 HTML 示例不完全匹配)

$(document).on("click", "button.buyAllOfIt", function() {
    //Iterate over each list item
    $("li").each(function() { 
        //Click the initial "buy" button:
        $(this).find('span.buy-item').trigger('click');

        //Click the confirmation "Yes" that pops up after the ajax finishes from above click:
        $(this).find('a.yes-buy').trigger('click');

        //Now it should wait until the above ajax finishes before it continues to
        // "trigger" the next "Buy" click in the next list item!
    });
});

本质上我只想迭代每个 li元素，然后在继续之前在两个不同的点等待。当.confirm-buy在当前 li 中添加了文本然后它应该继续(它将单击 buy 确认)，然后它应该再次等待，但这次是 .success-buy被填满。然后应该继续下一个li .

我对如何处理所有这些等待感到困惑，尤其是在 .each() 内时。

编辑:以下是图片形式的步骤示例:

Answer 1

您可以动态地从 javascript 渲染 li。您需要有一个调用 API 的方法来告诉您该项目是否可用。在 API 调用的回调函数中添加您的渲染方法。此方法运行一个 for 循环，该循环添加 li，然后渲染到 UI 中。

最佳实践是为“确认”框和“成功”框设置一个警报框。

为每个 li 使用一个 ID，并使用各自的 id 调用确认和成功方法，以将确认和稍后的成功呈现到 UI 中。