具有ajax的一次更改图像功能已经完成

Change image once function which has ajax has finished

本文关键字：功能 图像 一次 ajax 具有      更新时间：2023-09-26

我希望在单击时将图像更改为加载符号，然后在AJAX函数完成后再更改回来。

我得到了下面的内容，但它根本没有改变（好吧，它正在改变，但在不等待ajax调用完成的情况下立即改变回来）。为什么会发生这种情况？这是因为我的ajax调用包含在一个函数中吗？

  //adding product to cart
  $("body").on("click", "#cart_product_add", function() {
    var clickedIcon = $(this);
    //show the spinning loader
    var loader = $(clickedIcon).attr("src").replace("add_icon.png", "green_loading.gif");
    $(clickedIcon).attr("src", loader);    
    var code = $(clickedIcon).data("product_code");                  
    var description = $(clickedIcon).data("product_description");
    var whqc = $(clickedIcon).data("product_whqc");
    var qty = $(clickedIcon).prev("input[name=qty]").val();
    $.when(
      addCartProduct($("input[name=cart_id]").val(), code, description, whqc, qty)
    ).then(function() {
      loader = $(clickedIcon).attr("src").replace("green_loading.gif", "add_icon.png");
      $(clickedIcon).attr("src", loader);
    });
  });

$.when()只有在您传递一个或多个承诺时才能完成其工作。它没有任何神奇的能力来知道您传递的函数内的ajax调用何时完成。所以，如果您不向它传递promise，它只会立即执行.then()处理程序，并且不等待任何事情（这就是您所看到的）。

由于jQueryAjax调用已经返回了一个promise，您可能只需要返回那个promise。而且，如果您只有一个正在等待的操作，则没有理由在其中任何一个操作时使用$。以下是如何做到这一点的框架：

addCartProduct($("input[name=cart_id]").val(), code, description, whqc, qty).then(function() {
    loader = $(clickedIcon).attr("src").replace("green_loading.gif", "add_icon.png");
    $(clickedIcon).attr("src", loader);
});

function addCartProduct() {
    return $.ajax(...);
}

这可以帮助您http://api.jquery.com/ajaxstart/

您可以指定一次，它会为每个ajax请求触发。

相关文章：