JavaScript 变量不存在

Question

所以我正在创建一个简单的网页，它从一个 json 文件中获取数据并附加一些段落，这些段落等于 json 文件数组中的对象数:

$(function () {

    function init() {
       console.log("OK");
       var dat;
       var i;
       load();
       fill();
   }

   function load()
   {
       $.get("data.json", function (data, status) {
           dat=data;
           console.log(dat);
       })
   }

   function fill()
   {
       console.log(dat);
       for(i=0; i<dat.length(); i++) $("#container").append("<p>Testing</p> <br/><br/>")
   }

    $(".front").on("load", init());
});

然而，当我第一次运行网页时，我尝试做一个控制台日志，但它第二次打印出数据，在 fill() 函数中它说:

"Uncaught ReferenceError: dat is not defined"

有什么想法吗？

Answer 1

有几个问题:

1. dat 是您的 init 函数中的局部变量，因此您的 load 函数中的代码自然无法访问

2. 您正在调用 init，然后将其返回值传递给on，而不是连接init 作为 load 处理程序。

3. $.get 是异步，所以只需调用 load 然后调用 fill 就不会了'如果不起作用，fill 将在 GET 完成之前运行。

查看评论:

$(function () {
   var dat; // *** Make this global to the code (it's not actually global, which is good)

   function init() {
       load(fill); // *** Pass `fill` into `load`
   }

   function load(next) // *** Accept the callback to call when ready
   {
       $.get("data.json", function (data, status) {
           dat = data;
           console.log(dat);
           next(); // *** Call it
       })
   }

   function fill()
   {
       console.log(dat);
       for(i=0; i<dat.length(); i++) $("#container").append("<p>Testing</p> <br/><br/>")
   }

    $(".front").on("load", init); // *** No () on init, you want to pass the function into `on`, not *call* the function
});

一些其他注意事项:

1. 您也可以研究 promises。

2. 除非您需要 dat 而不是 fill，否则请考虑完全不使用 dat 变量；只需让 load 以数据作为参数调用 fill。