执行一个接一个的function

所有这些函数都在main函数中，该函数在jQuery异步AJAX成功事件之后调用，并且每秒运行一次。 三个函数中的每一个也调用其中的特定函数。

这是我的基本javascript代码：

function mainFunction() { function selectView(){ // do stuff } function startWidgets(){ // do stuff } function popData(){ // do stuff } $.when(selectView()).then(startWidgets).then(popData); } function ajaxCall(){ ajaxRequest = $.ajax({ type: "GET", url: "", data: {}, async: true, cache: false, timeout:50000, success: function(data){ mainFunction(); setTimeout( ajaxCall, 5000 ); }, error: function() { // error stuff }, complete: function() { // complete stuff } }); } 

selectView() – 使用jQuery .load（）方法根据特定的AJAX数据加载HTML结构。

startWidgets() – 通过将小部件放入HTML结构（基于ID和类）来初始化小部件。 仅在第一次运行。

popData() – 根据AJAX数据将数据填充到所有其他小部件。

我尝试了$.when(selectView()).then(startWidgets).then(popData);

但那没用。 我的问题是startWidgets通常在selectView之前运行，但由于还没有HTML标记，它失败了。 我需要它们以特定的顺序运行，并且在前一个完成之前不会启动它。

Answer 1

您需要从selectView返回promise对象，如果您没有从selectView返回promise，那么when将对象视为已解析并执行成功处理程序。

另外我认为最好使用.done()来处理回调。

 function mainFunction() { function selectView(){ // do stuff var xhr = $.ajax(....); .... return xhr; } function startWidgets(){ // do stuff } function popData(){ // do stuff } $.when(selectView()).done(startWidgets).done(popData); } 

Answer 2

我没有测试过，但这样的事情可能对你有所帮助;）

 selectView_done = false; startWidgets_done = false; function selectView() { // do stuff selectView_done = true; return ...; } function startWidgets() { // do stuff startWidgets_done = true; } function popData() { // do stuff } function control_selectView(){ if( selectView_done ){ startWidgets(); control_popData(); } else setTimeout(function(){ control_selectView() }, 100); } function control_popData(){ if( startWidgets_done ) popData(); else setTimeout(function(){ control_popData() }, 100); } selectView(); control_selectView();