jQuery funktioniert nur localhost

Question

Ich habe js Spiel, das gut funktioniert auf localhost (apache2), aber auf meinem Server (und auf github-Seiten - wo die Quelle herkommt) funktioniert das Spiel nicht. jQuery ist geladen und in Chrome Konsole funktioniert gut. Es scheint, dass $(document).ready nicht funktioniert. Der Code für main.js ist hier und das ist die github repository link. words.json ist ein 1mb Wörter-Dikton. Das Spiel auf GitHub hat vorher funktioniert. Irgendwelche Ideen?

$.getScript("js/timer.js"); 
$.getScript("js/functions.js"); 
$.getJSON("js/words.json").then(start); 

var typos = 0; 
var item; 
var typedwords = []; 
var correct; 
var words; 
var words_obj; 

function start(response) { 
    words = response["words"]; 
    $("#times").html(""); 
} 

$(document).ready(function() { 
    if (getParameterByName("seed") == undefined) { 
    window.location.replace(window.location.href + "?seed=" + makeid()); 
    }; 

    Math.seed = getParameterByName("seed"); 

    $("#start").click(function() { 
    $(".header").slideUp(); 
    regenerate(); 
    }); 

    $("body").keyup(function(e) { 
    if (String.fromCharCode(e.which).toLowerCase() == item.charAt(correct).toLowerCase()) { 
     $("#"+correct).addClass("active"); 
     correct ++; 
     if (correct == item.length) { 
     typedwords.push(item); 
     $("#times").append(time.toFixed(2)+" ("+item+")<br>") 
     regenerate(); 
     }; 
    } 
    else { 
     time += 1; 
     typos++; 
    }; 
    }); 
}); 

function regenerate() { 
    stopTimer(); 
    saveLastTime(); 
    resetTimer(); 
    startTimer(); 

    correct = 0; 
    item = words[Math.floor(Math.seededRandom(words.length,0))]; 
    text = ""; 

    for (i = 0; i < item.length; i++) { 
    text += "<span id='" + i +"'>"+item.charAt(i)+"</span>"; 
    }; 

    $("#text").html(""); 
    $("#text").html(text); 
} 

Answer 1

Sie verwenden $.getScript JS-Code in Ihre Seite einbinden. Das ist nicht der richtige Weg, da $.getScript asynchron ist und nicht garantiert abgeschlossen wird, bevor das DOM als geladen betrachtet wird und alle Callbacks $(document).ready(...) aufgerufen werden und Sie auf eine Variable zugreifen, die in diesen Dateien von einem solchen Callback definiert ist.

Sie sollten die beiden Skripte umfassen <script src=...></script> in Ihrem HTML verwenden:

<script src="js/timer.js" charset="utf-8"></script> 
<script src="js/functions.js" charset="utf-8"></script> 

Answer 2

Ein anderer Weg, um diesen Ansatz ist

<script> 
    if (window.jQuery) { 
    document.write('<script type="text/javascript" src="js/timer.js"><\/script>') 
    document.write('<script type="text/javascript" src="js/functions.js"><\/script>') 
    } 
</script>