jQuery等待一个函数完成，然后再启动新的函数

Question

我在jQuery中有两个函数，我想按特定顺序激发它们。第一个函数是ajax函数，用于更新部分视图。另一个应该在ajax函数完成后对部分视图进行一些样式设置——这个函数接受一个参数。

ajaxFunction();
stylingFunction(params);

我尝试过以下几种：

ajaxFunction(function() {
stylingFunction(params)
});

此外，我尝试过使用回调：

ajaxFunction(stylingfunction(params));
ajaxFunction(callback)
{
//Do update
callback()
}

然而，这些都不起作用。由于局部视图正在更新，样式在其消失后不久就会出现。我哪里错了？

这两个函数都是在我的"父"视图中编写的。

Answer 1

您可以使用链接到$.ajax调用的.done((和.fail((。。。

我在successCallback((中用psuedo代码创建了几个回调函数，因为您说过"有时"只需要运行样式函数。您需要测试该函数内部的任何条件，以确定是否要运行样式函数。希望这能有所帮助。

(function($) {
$(function() {   //document.ready
$.ajax({ cache: false,
url: "/blah/vlah/lah",
data: { somedata: somedata }
})
.done(successCallback)
.fail(failCallback);
});
function successCallback(data) {
if (someCondition) {
stylingFunction(params);
}
};
function failCallback(jqXHR, status, error) {
console.log(jqXHR);
console.log(error);
console.log(status);
};
})(jQuery);

我创建了另一个处理ajax事件委派的要点，您可能希望查看并合并任何对您的情况似乎有帮助的内容。https://gist.github.com/inceptzero/a753d020648f49da90f8

我还在github上为ajax请求队列创建了这个要点，它更加优雅和健壮。https://gist.github.com/inceptzero/e64756f9162ca6aeeee5

Answer 2

由于您使用的是jQuery，因此您可以const ajaxFunc = callback => $.ajax({...}).done( data => callback)。此外，您还可以使用async/await。你可以在MDN上阅读更多关于它的信息。