如何在jquery中使用承诺?

Question

我通过多个ajax调用拉入多个div。在第一次 ajax 调用之前，我想显示一个加载微调器。一旦所有div(这将需要未知的时间(都加载完毕，我想对它们进行排序。最后，我想删除加载微调器层。

我想我需要为此使用承诺(因为多个 ajax 调用(，但是我不明白如何实现承诺 - 有人可以告诉我如何编写承诺，如果我需要向我的函数添加与此相关的代码，请添加什么？

谢谢。

这是我的代码：

$(document.body).on('click', "#refresh_view", function(){
start_spinner();
load_all_divs(list_of_ids_to_loop_over);
// once the above is complete
re_order_divs();
// once the above is complete
end_spinner();
});

load_all_divs(list_of_ids_to_loop_over) {
$.each(list_of_application_ids.split(','), function(index){
do_ajax_call_for_this_one_item(this)
});
};

Answer 1

如果你用jQuery的$.ajax(或$.get等(加载div，你可以使用jQuery的$.when，因为它们已经返回jQueryjqXHR对象，这些对象类似于promise：

$.when(
$.ajax(/*...*/),
$.ajax(/*...*/),
$.ajax(/*...*/)
)
.done(() => {
// All done
})
.fail(error => {
// Something went wrong
});

如果你使用的是中等最新版本的jQuery，你也可以使用标准Promise.all，因为现代版本的jQueryjqXHR对象都是可的。Promise.all接受数组：

Promise.all([
$.ajax(/*...*/),
$.ajax(/*...*/),
$.ajax(/*...*/)
])
.then(() => {
// All done
})
catch(error => {
// Something went wrong
});