在前端开发过程中，我们经常需要通过 Ajax 请求获取 JSON 数据。在 jQuery 中，可以使用 $.getJSON() 函数来实现这一功能。但是，在使用该函数时，有一个需要注意的问题：通过该函数设置的变量仅能在函数内部访问。
问题描述
下面给出一个例子：
--- ----- ------------------------- ------------------ - ---- - --------- --- ------------------
在这个例子中，我们定义了一个变量 data，然后通过 $.getJSON() 方法获取到了 example.json 文件中的 JSON 数据，并将其赋值给 data 变量。最后，我们想要通过 console.log() 打印出 data 的值。
但是，运行上述代码后，我们会发现控制台输出的结果为 undefined。这是因为，$.getJSON() 方法是异步执行的，也就是说，当它执行完毕后，才会执行 console.log()。而在回调函数执行之前，console.log() 已经被执行了，此时 data 变量还没有被赋值，故输出结果为 undefined。
解决方案
为了解决上述问题，我们需要将 console.log() 放入回调函数中，如下所示：
--- ----- ------------------------- ------------------ - ---- - --------- ------------------ ---
这样，当 $.getJSON() 方法获取到数据并将其赋值给 data 变量后，就会立即输出 data 的值。
另外，在使用 $.getJSON() 方法时，我们也可以使用 Promise 来处理异步操作。下面是一个示例代码：
--- ------- - -------------------------- --------------------------- - ------------------ --- ----------------------- - --------------- ----- ----------- ---
在这个示例中，我们首先调用 $.getJSON() 方法来获取 JSON 数据，然后通过 promise.done() 和 promise.fail() 分别指定回调函数，以处理成功和失败的情况。
总结
在使用 $.getJSON() 方法时，一定要注意回调函数的执行顺序，确保在获取到数据之后再进行其他操作。此外，我们也可以使用 Promise 来处理异步操作，使代码更加简洁明了。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/26677