时间戳

首页 > 解决方案 > 加载文件后如何执行javascript文件

javascript - 加载文件后如何执行javascript文件

问题描述

我有多个 js 文件，我使用 Head.js 库在页面加载之前同时加载它们，但我仍然得到一个错误，当一个错误的顺序不正确时，一个函数正在尝试调用对于其他文件中的函数，但该文件尚未加载，因此导致未定义...

如何确保所有文件都已加载，以便可以使用？每次我有新文件时，我真的需要订购它们吗？

HTML

<script src="/Head.js" type="text/javascript"></script>
<script src="Loader.js" type="text/javascript"></script>

加载器是我加载所有文件的地方，头部是所述加载器的库。

加载器 JS

var Arts = '/Game Projects/The Grand Hunt CYOA/Arts/Style.css'

var jQuery = '/jQuery.js'

var Intro = '/Game Projects/The Grand Hunt CYOA/Events/Introduction.js'

var System = '/Game Projects/The Grand Hunt CYOA/Systems/System.js'

var Equipment = '/Game Projects/The Grand Hunt CYOA/Characters/Player/Equipment.js'

var Inventory = '/Game Projects/The Grand Hunt CYOA/Characters/Player/Inventory.js'

var Store = '/Game Projects/The Grand Hunt CYOA/Systems/Store.js'

var Random_Encounter = '/Game Projects/The Grand Hunt CYOA/Systems/Random Encounter.js'

var Map = '/Game Projects/The Grand Hunt CYOA/Systems/Map.js'

var Stat = '/Game Projects/The Grand Hunt CYOA/Characters/Stats.js'

head.load(Arts, jQuery, Intro, System, Equipment, Inventory, Store, Random_Encounter, Map, Stat, function(){
    console.log('loading completed')
});

Console Log


Introduction.js:13 Unknown

Random Encounter.js:209 Uncaught SyntaxError: Unexpected token '}'

Stats.js:41 max is 100
Stats.js:42 current is 0
Stats.js:44 level is 1
Stats.js:45 Stat Points is 0
Stats.js:58 max is 100
Stats.js:59 current is 0
Stats.js:61 level is 1
Stats.js:62 Stat Points is 0

Loader.js:22 loading completed

Map.js:1471 Your location is GM_A_Tutorial
System.js:24 
Map.js:1706 Using (4,4) as Starting Location.

System.js:71 Your Movement is now false for next function call, but you lost the ability to move for this function call.

**jQuery.js:3734 jQuery.Deferred exception: ERG is not defined ReferenceError: ERG is not defined
    at startGame (http://127.0.0.1:5500/Game%20Projects/The%20Grand%20Hunt%20CYOA/Events/Introduction.js:83:3)
    at HTMLDocument.<anonymous> (http://127.0.0.1:5500/Game%20Projects/The%20Grand%20Hunt%20CYOA/Events/Introduction.js:50:3)
    at mightThrow (http://127.0.0.1:5500/jQuery.js:3461:36)
    at process (http://127.0.0.1:5500/jQuery.js:3526:21) undefined**

jQuery.Deferred.exceptionHook @ jQuery.js:3734
process @ jQuery.js:3529
setTimeout (async)
(anonymous) @ jQuery.js:3561
fire @ jQuery.js:3204
fireWith @ jQuery.js:3330
fire @ jQuery.js:3338
fire @ jQuery.js:3204
fireWith @ jQuery.js:3330
ready @ jQuery.js:3786
setTimeout (async)
(anonymous) @ jQuery.js:3806
(anonymous) @ jQuery.js:34
(anonymous) @ jQuery.js:38

**jQuery.js:3740 Uncaught ReferenceError: ERG is not defined
    at startGame (Introduction.js:83)
    at HTMLDocument.<anonymous> (Introduction.js:50)
    at mightThrow (jQuery.js:3461)
    at process (jQuery.js:3526)**

startGame @ Introduction.js:83
(anonymous) @ Introduction.js:50
mightThrow @ jQuery.js:3461
process @ jQuery.js:3526
setTimeout (async)
jQuery.readyException @ jQuery.js:3739
(anonymous) @ jQuery.js:3755
mightThrow @ jQuery.js:3461
process @ jQuery.js:3526
setTimeout (async)
(anonymous) @ jQuery.js:3561
fire @ jQuery.js:3204
fireWith @ jQuery.js:3330
fire @ jQuery.js:3338
fire @ jQuery.js:3204
fireWith @ jQuery.js:3330
process @ jQuery.js:3544
setTimeout (async)
(anonymous) @ jQuery.js:3561
fire @ jQuery.js:3204
fireWith @ jQuery.js:3330
fire @ jQuery.js:3338
fire @ jQuery.js:3204
fireWith @ jQuery.js:3330
ready @ jQuery.js:3786
setTimeout (async)
(anonymous) @ jQuery.js:3806
(anonymous) @ jQuery.js:34
(anonymous) @ jQuery.js:38

Map.js:1740 Something special on this tile.

让我烦恼的是粗体的错误，另一个可以修复。

它说它没有定义。

然而，它是在文件 Random Encounter 中定义的，并且位于金字塔的顶部，因此它不应该位于任何可能阻止它被 Intro 文件看到的东西中......

function ERG() { // Enemy Random Generator
    // Enemy will have three structures to form their form. Body, Name, and Element,
    // Body decide their species and whatever they are capable of talking or mob or smart, etc.
    // Name decide their name, their title will be mixture of their element and body which can decide their personality.
    // Their element is their power such as darkness, light, fire, earth, tech, psi, etc. it also influence their personality.
    
    let E_B = Math.floor((Math.random() * 3) + 1) // Enemy Body
    console.log('E_B '+E_B)
    let E_N = Math.floor((Math.random() * 3) + 1) // Enemy Name
    console.log('E_N '+E_N)
    let E_E = Math.floor((Math.random() * 3) + 1) // Enemy Element
    console.log('E_E '+E_E)

    //console.log('currentland is '+currentland)

    if (currentland == 'A_Tutorial') {
        EC(E_B, E_N, E_E);
    }

    function EC(E_B, E_N, E_E) { // Enemy Creation

        if (E_B == 1) {
            E_B = "Cultist"
            console.log(E_B)
        }
        if (E_B == 2) {
            E_B = "Cosmic Horror"
        }
        if (E_B == 3) {
            E_B = 
        }

        if (E_N == 1) {

        }
        if (E_N == 2) {

        }
        if (E_N == 3) {

        }

        if (E_E == 1) {

        }
        if (E_E == 2) {

        }
        if (E_E == 3) {

        }
    }

标签： javascripthtmljquery

解决方案

最后，我得到了答案。我已经使用加载事件来解决这个问题。事件加载在元素加载后运行。DOMContentLoaded在加载内容（不是媒体，如图像、视频、声音）后也会运行。https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event

function loadScript(src, fn, type="text/javascript") {
  var e = document.createElement("script"),
  cs = document.currentScript,
  ce = document.body || document.querySelector("head");
  if (fn) e.addEventListener("load", fn);
  e.type = type;
  e.src = src;
  if (cs) cs.parentElement.insertBefore(e, cs);
  else ce.appendChild(e);
}
//Example using the function
loadScript("js/chart.bundle.min.js", function(){
  loadScript("js/chartjs-plugin-labels.min.js",function(){
    new Chart(bar, config.bar)
  })
});

好的，我是对“繁琐”的回应。我会用递归使它更容易。

function callAScripts(srcs, fn) {
  //srcs is an array files javascript and fn is function
  function loadScript(src, fn) {
    var e = document.createElement("script"),
    cs = document.currentScript,
    ce = document.body || document.querySelector("head");
    if (fn) e.addEventListener("load", fn);
    e.src = src;
    if (cs) cs.parentElement.insertBefore(e, cs);
    else ce.appendChild(e);
  }
  if (srcs.length) {
    if (srcs.length == 1) {
      loadScript(srcs[0], fn)
    } else {
      loadScript(srcs[0], function(){callAScripts(srcs.slice(1, Infinity), fn)})
    }
  }
}

它使用递归方法，称为自我。例如：

function f(n) {
  if (n < 2) return 1;
  return n*f(n-1);
}

但是，代码callAScripts比示例更复杂。

推荐阅读