你如何让JavaScript代码执行*按顺序*

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (17)

好的,所以我明白Javascript不是C#或PHP,但我一直回到Javascript中的问题 - 而不是JS本身,但我使用它。

我有一个功能:

function updateStatuses(){

showLoader() //show the 'loader.gif' in the UI

updateStatus('cron1'); //performs an ajax request to get the status of something
updateStatus('cron2');
updateStatus('cron3');
updateStatus('cronEmail');
updateStatus('cronHourly');
updateStatus('cronDaily');

hideLoader(); //hide the 'loader.gif' in the UI

}

事情是,由于JavaScript在代码中的强烈愿望,加载程序从不出现,因为'hideLoader'函数直接运行。

我怎样才能解决这个问题?或者换句话说,我怎样才能让我的JavaScript函数按照我在页面上写的顺序执行......

提问于
用户回答回答于

如果您正在进行AJAX编程,您需要将JavaScript视为基于事件而非程序化。在执行第二个调用之前,您必须等到第一个调用完成。做到这一点的方法是将第二个调用绑定到第一个完成时触发的回调。不知道更多关于你的AJAX库的内部工作原理(希望你使用的库),我不能告诉你如何做到这一点,但它可能看起来像这样:

showLoader();

  updateStatus('cron1', function() {
    updateStatus('cron2', function() {
      updateStatus('cron3', function() {
        updateStatus('cronEmail', function() {
          updateStatus('cronHourly', function() {
            updateStatus('cronDaily', funciton() { hideLoader(); })
          })
        })
      })
    })
  })
});

这个想法是,updateStatus采用它的正常参数,加上一个回调函数在完成时执行。传递一个函数来运行onComplete一个提供这样一个钩子的函数是一个相当常见的模式。

如果你使用jQuery,你可以在$.ajax()这里阅读:http : //api.jquery.com/jQuery.ajax/

你的代码可能看起来像这样:

function updateStatus(arg) {
  // processing

  $.ajax({
     data : /* something */,
     url  : /* something */
  });

  // processing
}

你可以修改你的函数,将回调函数作为第二个参数,如下所示:

function updateStatus(arg, onComplete) {
  $.ajax({
    data : /* something */,
    url  : /* something */,
    complete : onComplete // called when AJAX transaction finishes
  });

}

用户回答回答于

出现问题是因为AJAX的本质是异步。这意味着这些updateStatus()调用确实按顺序执行,但立即返回并且在hideLoader()从AJAX请求中重新获取任何数据之前JS解释器已到达。

您应该hideLoader()对AJAX调用完成的事件执行该操作。

扫码关注云+社区