JavaScript：4个asyncronys函数在继续之前依次等待彼此完成？

我有四个function：

// NOTE: localDataStore is a function to stringify/parse an item from localStorage function removeCookie() { chrome.cookies.remove({"name":"v1guid","url":"http://website.com"},function (cookie){ console.log("cookie removed"); }); } function getCookie() { chrome.cookies.get({"url": "http://website.com", "name": "v1guid"}, function(cookie) { console.log(cookie); if(cookie !== null) { console.log("getting cookie"); localDataStore.set("cookie", cookie); console.log(localDataStore.get("cookie")); } }); } function setCookie() { var cookiedata = localDataStore.get("cookie"); chrome.cookies.set({ "url": "http://website.com", "name": cookiedata.name, "value": cookiedata.value, "domain": cookiedata.domain, "path": cookiedata.path, "secure": cookiedata.secure, "httpOnly": cookiedata.httpOnly, "storeId": cookiedata.storeId}, function(cookie) { console.log("cookietest"); console.log(JSON.stringify(cookie)); }); } function minePosts() { // Do a bunch of stuff } 

我试图让他们等待彼此执行，然后再按顺序继续下一个function：

 getCookie(); removeCookie(); minePosts(); setCookie(); 

我知道这可以通过回调来完成，但是在彼此之间嵌套4个回调会使我的代码真的难以阅读并使我的代码更少模块化 – 我可能正在编写我的回调错误我不确定。 我删除了这篇文章的回调，希望有人可以帮我正确地做到这一点。 如何有效地使这4个函数按顺序运行并按顺序相互等待？ 我也在使用JQuery并阅读命令$ .Deferred（）但我不确定这是否是使用它的正确做法。

有人可以帮帮我吗？ 我在互联网上搜索，找不到任何有同样问题的人，因为我试图让4个函数相互等待。 谢谢！

Answer 1

您可以使用回调或$ .Deferred（）来延迟函数。 前一种方法更简单，另一方面后者更健壮，因为您可以使用deferred.reject()来处理错误状态。

1）回调

 function removeCookie(callback) { chrome.cookies.remove({"name":"v1guid","url":"http://website.com"},function (cookie){ console.log("cookie removed"); callback(); }); } 

等等

 getCookie(function(){ removeCookie(function(){ minePosts(function(){ setCookie(function(){ // do something }); }); }); }); 

2） $.Deferred()

 function removeCookie() { var deferred = $.Deferred(); chrome.cookies.remove({"name":"v1guid","url":"http://website.com"},function (cookie){ console.log("cookie removed"); deferred.resolve(); }); return deferred.promise(); } 

等等

 getCookie().then(function(){ removeCookie().then(function(){ minePosts().then(function(){ setCookie().then(function(){ // do something }); }); }); }); 

或者按照riovel（jQuery 1.8+）的建议链接

 getCookie() .then(removeCookie) .then(minePosts) .then(setCookie) .then(function(){ // do something }); 

Answer 2

 function one() { console.log('one'); deferred = jQuery.Deferred(); setTimeout(function() { console.log('one done'); deferred.resolve(); }, 1000); return deferred; } function two() { console.log('two'); deferred = jQuery.Deferred(); setTimeout(function() { console.log('two done'); deferred.resolve(); }, 1000); return deferred; } function three() { console.log('three'); deferred = jQuery.Deferred(); setTimeout(function() { console.log('three done'); deferred.resolve(); }, 1000); return deferred; } function four() { console.log('four'); deferred = jQuery.Deferred(); setTimeout(function() { console.log('four done'); deferred.resolve(); }, 1000); return deferred; } one() .then(two) .then(three) .then(four); 

这是一个吸引人的例子 。