javascript - 嵌入的 Javascript 不执行

Question

我的 HTML 中嵌入了以下两个几乎相同的 Javascript block (我知道，我知道，但我越来越绝望了......

就业 block :

    <script>
    var xmlhttp = new XMLHttpRequest();
    var jobs = "employment.json";
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState === 4 && xmlhttp.status == 200) {
            var json_in = JSON.parse(xmlhttp.responseText);
            console.log("Showing json_in");
            console.log(json_in);
            load_json(json_in);
         }
     }
     xmlhttp.open("GET", jobs, true);
     xmlhttp.send();

     function load_json(data) {
         console.log("Showing Employment data");
         console.log(data);
         var out = "";
         var i;
         for (i = 0; i < data.jobs.length; i++) {
             out += "<tr><td id = \"data-column\" width=\"30%\">" + data.jobs[i].Name + "<br>" + data.jobs[i].JobTitle + "<br>" + data.jobs[i].Dates + "</td><td id = \"desc-column\" width=\"70%\">" + data.jobs[i].Description + "</td></tr>";
         }
         document.getElementById("jobs").innerHTML = out;
      }
 </script>

训练 block :

<script>
  var xmlhttp = new XMLHttpRequest();
  var url = "training.json";

  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState === 4 && xmlhttp.status == 200) {
      var json_in = JSON.parse(xmlhttp.responseText);
      load_json(json_in);
    }
  }
  xmlhttp.open("GET", url, true);
  xmlhttp.send();

  function load_json(data) {
    console.log("Showing Training data");
    console.log(data);
    var out = "";
    var i;
    for (i = 0; i < data.courses.length; i++) {
                        out += "<tr><td width=\"20%\">" + data.courses[i].Course + "</td><td width=\"10%\">" + data.courses[i].Website + "</td><td width=\"35%\">" + data.courses[i].URL + "</td><td width=\"35%\">" + data.courses[i].Description + "</td></tr>";
     }
     document.getElementById("train").innerHTML = out;
  }
</script>

最后，控制台日志输出...

Showing Training data
VM286:1 XHR finished loading: GET "https://lekrigbaum.com/pages/employment.json".
(anonymous) @ VM286:1
(anonymous) @ resume.html:77
resume.html:157 {courses: Array(8)}courses: Array(8)0: {Course: "Web Development", Website: "Udacity", URL: "https://www.udacity.com/course/web-development--cs253", Description: "Basics of using HTML, CSS, and Javascript to creat…sites.  Note: This cource has since ben modified."}1: {Course: "Intro to HTML and CSS", Website: "Udacity", URL: "https://in.udacity.com/course/intro-to-html-and-css--ud304", Description: "Introduction to HTML, CSS, design concepts and the Document Object Model"}2: {Course: "Javascript Basics", Website: "Udacity", URL: "https://in.udacity.com/course/javascript-basics--ud804", Description: "Introduction to Javascript programming and using J…ipt to interact with the DOM to modify web pages."}3: {Course: "Responsive Web Design Fundamentals", Website: "Udacity", URL: "https://www.udacity.com/course/web-development--cs253", Description: "Principles of responsive web site design and how to create layouts."}4: {Course: "JavaScript: Understanding the Weird Parts", Website: "Udemy", URL: "https://www.udemy.com/understand-javascript/", Description: "An in-depth examination of Javascript features."}5: {Course: "Bulding Responsive Real World Websites with HTML5 and CSS", Website: "Udemy", URL: "https://www.udemy.com/design-and-develop-a-killer-website-with-html5-and-css3/", Description: "Extensive exercises in building real-world websites."}6: {Course: "Go Programming Language", Website: "Udemy", URL: "https://www.udemy.com/learn-how-to-code/", Description: "Extensive introduction to the Go programming language."}7: {Course: "Web Development with Google's Go Programming Language", Website: "Udemy", URL: "https://www.udemy.com/go-programming-language/", Description: "Using Go to replace web server.  Includes use of Go templates and other features."}length: 8__proto__: Array(0)__proto__: Object
VM286:1 XHR finished loading: GET "https://lekrigbaum.com/pages/training.json".
(anonymous) @ VM286:1
(anonymous) @ resume.html:153

最终结果是，虽然训练 block 出现在最终网页中，但就业 block 却没有出现，并且从 console.log 中可以看出就业 Javascript 并未运行。我对此进行了数千次研究，甚至要求另一位开发人员查看它，但我们都一无所获。

有人看出我哪里搞砸了吗？

Answer 1

问题实际上在于，您在同一范围内声明了所有变量和函数。因此，当执行训练 block 中的代码时，它会覆盖 xmlhttp 变量，因此仅执行该 block 中的代码。您可以将训练 block 中的 xmlhttp 重命名为其他名称，或者更好的解决方案是使用模块模式并将两个 block 放入单独的 IIFE(立即调用的函数表达式)中:

<script>
(function () {
  var xmlhttp = new XMLHttpRequest();
  var url = "training.json";

  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState === 4 && xmlhttp.status == 200) {
      var json_in = JSON.parse(xmlhttp.responseText);
      load_json(json_in);
    }
  }
  xmlhttp.open("GET", url, true);
  xmlhttp.send();

  function load_json(data) {
    console.log("Showing Training data");
    console.log(data);
    var out = "";
    var i;
    for (i = 0; i < data.courses.length; i++) {
                        out += "<tr><td width=\"20%\">" + data.courses[i].Course + "</td><td width=\"10%\">" + data.courses[i].Website + "</td><td width=\"35%\">" + data.courses[i].URL + "</td><td width=\"35%\">" + data.courses[i].Description + "</td></tr>";
     }
     document.getElementById("train").innerHTML = out;
  }
})();
</script>

这样，您将拥有独立的作用域并且不会发生名称冲突。