为什么这个函数在ajax调用后执行时停止工作？

Question

I have the following jsfiddle

<style>
  .line {
    fill: none;
    stroke: steelblue;
    stroke-width: 2px;
  }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
  var data = [{ "date": "1-May-10", "close": 2 }, { "date": "1-May-12", "close": 7 }];
  var result = { // a mock version of our response
    "javascript": ["https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.js", "https://cdn.jsdelivr.net/gh/nottoobadbutgoodname/tester/chart.js"
    ]
  }

  function loadAll(resultt) { // throwaway var resultt as we are using our mock result
    console.log("loading....");
    getMultiScripts = function (arr) {
      var _arr = $.map(arr, function (scr) {
        return $.getScript(scr);
      });
      _arr.push($.Deferred(function (deferred) {
        $(deferred.resolve);
      }));
      return $.when.apply($, _arr);
    }
    getMultiScripts(result.javascript.slice(0, -1)).done(function () {
      $("<script/>", {
        src: result.javascript[result.javascript.length - 1]
      }).appendTo("body");
    });
  }

  function main() {
    $(document).ready(function () {
      $.ajax({
        url: "http://127.0.0.1:8000",
        success: loadAll
      });
    });
  }

  main(); // doesn't work
  //loadAll(result); // works!
</script>

running loadAll(result) directly works but when I try it with an ajax call it fails silently. Essentially, the ajax call grabs some .js files that are then loaded. Running main will fetch the scripts but doesn't seem to execute them (status code for both is 200 but the status code for chart.js is greyed out when running main() but black when running loadAll()

EDIT:

This is weird. Since in the example I am just mocking the result I thought I'd try an experiment:

https://jsfiddle.net/rwzm4t75/4/

Basically, I turn it into a JSONP call and grab some random JSONP data and turn loadAll to the jsonCallback function. The chart is now loading consistently but, unfortunately, for the "real world" the result cannot be mocked and the data comes as JSON, not JSONP.

To be clear, I've tried a JSON response in my real app and JSONP. The JSON version will sometimes load but not consistently. The JSONP version always loads.

Answer 1

Try to execute main() inside document ready:

$(document).ready(function () {
    main();
});

function main() {
    $.ajax({
      url: "http://127.0.0.1:8000",
      dataType: 'JSON',
    })
    .done(function(result)){
       loadAll(result);
    });
}