需要同步任务的异步环境

Question

我有一系列页面，需要从JSON提取的数据，以相关格式显示它，然后应用布局脚本以应用相关位置。

从理论上讲，这很好用，但是由于环境是异步的并且脚本需要出现问题，因此目前我的脚本如下：

function getRespondPage() {
  $.getJSON('http://mitmark-cms.eu-west-2.elasticbeanstalk.com/api/page/get/respond', function(data) {
      $('#typed-strings')
        .html('<p>' + data.Section1Title + '</p>');
      $('#respond-section1-services')
        .html(data.Section1);
      $('#respond-section1-summary')
        .html('<p>' + data.Section1Summary + '</p>');
      $('.top')
        .css('background-image', "url('" + data.SelectedHeaderImageURL + "')");

      $('#respond-section2')
        .html(data.Section2);
      $('#respond-section2-mobile')
        .html(data.Section2);
      $('#respond-section3')
        .html(data.Section3);
      $('#respond-section3-mobile')
        .html(data.Section3);

      getCaseStudies('respond');
      getOtherContent(data);
    })
    .done(function() {
      setTyped();
    });
}

因此，在上面的示例中，键入的集合包含在加载数据时需要运行的一系列脚本。这在大多数情况下都适用，但是如果数据连接速度很慢，则脚本可以在数据完成之前运行。我能想到的解决此问题的唯一方法是setTimeout，例如添加：

function getRespondPage() {
  $.getJSON('http://mitmark-cms.eu-west-2.elasticbeanstalk.com/api/page/get/respond', function(data) {
      $('#typed-strings')
        .html('<p>' + data.Section1Title + '</p>');
      $('#respond-section1-services')
        .html(data.Section1);
      $('#respond-section1-summary')
        .html('<p>' + data.Section1Summary + '</p>');
      $('.top')
        .css('background-image', "url('" + data.SelectedHeaderImageURL + "')");

      $('#respond-section2')
        .html(data.Section2);
      $('#respond-section2-mobile')
        .html(data.Section2);
      $('#respond-section3')
        .html(data.Section3);
      $('#respond-section3-mobile')
        .html(data.Section3);

      getCaseStudies('respond');
      getOtherContent(data);
    })
    .done(function() {
      setTimeout(function() {
        setTyped();
      }, 1000);;
    });
}

这似乎可以在Chrome中模拟为慢速3G。有一个更好的方法来执行此操作，尽管这是一个问题，因为这似乎是一个“凸起”！