javascript - 动态加载的 JS 在函数完成后才可用

Question

我有一个使用加载函数加载 jQuery 的函数。加载 jQuery 后，在接下来的几行中，我尝试调用 jQuery 功能，但它们不起作用。如果我重新加载该函数，它就会起作用。我尝试过使用 setTimeOut、回调函数，并在调用函数中重新加载同一函数两次，但第一次无法读取 jQuery。

我正在一个平台(iNotes)上工作，该平台不允许我直接访问标题、正文等。我必须以编程方式执行此操作。除了通过 javascript 之外，我无法访问 onload，也无法添加 .js 文件。

我想通过该函数加载 jQuery(和 jQuery-ui)，然后立即使用 jQuery 方法。

从菜单项调用alertTwo()。

function alertTwo(){
  window.setTimeout(function(){
      chk4_jQuery();
      iPage();
  },0);
}

 function chk4_jQuery() {
    if (typeof jQuery == 'undefined'    ) {
         loadJQ( function(){console.log('finallydone')});
    }else{
        // alert('Found jQuery');
    }
}

function loadJQ(finalCallback) {
    function load1() {
        loadScript('https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js ', function(){
            console.log('jQuery loaded');
            load2();
        }, 'script');
    }
    function load2() {
        loadScript('https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js', function(){
            console.log('Jquery UI loaded');
            load3();
        },'script');
    }
    function load3() {
        loadScript('https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css',function(){
            console.log('css loaded');
            finalCallback();
        },'stylesheet');
    }
    load1();
}

function iPage(){
    var page = location.protocol.concat("//").concat(window.location.hostname) +  "/testPage.html";
    var $dialog = $('<div></div>')
               .html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')
               .dialog({
                   autoOpen: false,
                   modal: true,
                   height: 625,
                   width: 500,
                   title: "Some title"
               });
    $dialog.dialog('open');
    }

在开发人员工具的 Chrome 源选项卡中，我观察了这些函数处的断点，我看到它去加载 jQuery 库，然后它到达 iPage() 函数并在

处出错

var $dialog = $('<div></div>')

当我再次运行该函数时，它会识别 jQuery 变量并运行。

有人知道我如何才能让它在第一次尝试时工作吗？

Answer 1

调用 iPage 作为回调。

function alertTwo() {
  chk4_jQuery(); //Invoke `chk4_jQuery` function
}

function chk4_jQuery() {
  loadJQ(iPage); //Invoke `loadJQ` function and pass `iPage` function as argument
}
}

function loadJQ(finalCallback) { // `finalCallback` is nothing but `iPage`
  function load1() {
    loadScript('https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js ', function() {
      console.log('jQuery loaded');
      load2();
    }, 'script');
  }

  function load2() {
    loadScript('https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js', function() {
      console.log('Jquery UI loaded');
      load3();
    }, 'script');
  }

  function load3() {
    loadScript('https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css', function() {
      console.log('css loaded');
      finalCallback(); //`iPage` is invoked when all other scripts are loaded
    }, 'stylesheet');
  }
  load1();
}

function iPage() {
  var page = location.protocol.concat("//").concat(window.location.hostname) + "/testPage.html";
  var $dialog = $('<div></div>')
    .html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')
    .dialog({
      autoOpen: false,
      modal: true,
      height: 625,
      width: 500,
      title: "Some title"
    });
  $dialog.dialog('open');
}