Question

我希望图像在单击时更改为加载符号，然后在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);
    });

  });

Answer 1

这可以帮到你 http://api.jquery.com/ajaxstart/

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

Answer 2

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

由于jQuery Ajax调用已经返回一个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(...);
}

一旦具有ajax的函数完成，就更改图像

2 个答案: