单击一堆需要等待Ajax调用的按钮，然后再继续使用Greasemonkey

Question

我有一个HTML结构，基本上看起来像我在下面提供的示例。我试图使用运行良好的jquery的li遍历每个.each()。然后，我想尝试单击每个也可以使用的“购买”按钮。

这是斗争开始的地方。单击购买后，将进行AJAX调用以检查该商品是否仍然可用，然后显示确认div（在下面的代码中看到确认div）。然后，我想单击“是”以确认交易（已经使触发器在这里工作）。但是，在进行下一个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确认），然后应再次等待，但这一次是{{1} }。然后应该继续到下一个.success-buy。

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

编辑：这是图片形式的步骤示例：

Answer 1

您可以从javascript动态呈现li。您需要有一个调用API的方法，该API向您提供该项目是否可用。在API调用的回调函数中添加您的render方法。此方法运行一个for循环，该循环添加li并将其呈现到UI中。

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

为每个li使用一个ID，然后将带有相应ID的Confirm and Success方法调用为将确认和以后成功的方法呈现到UI中的方法。