Javascript 和 Jquery 中的变量范围

Question

我遇到了困扰我的事情。我做的代码如下

var json='';
function displayThumbnails(list) {
    json = list;
    for(var i in list)
    {
        var image = $("<img class='item'>").attr("src", list[i].thumbnail);
        $("#showThumbnails").append(image);
    }  
}
alert(json);

我想问变量 json 也有一个作用域之外的函数，但是警报显示空白值。

console.log(json) 在函数内时显示结果。 json 的作用域在函数后没有结束，但警报显示空白值。为什么。？

根据公众需求：D

这是mainpage.php

<script>
  $(document).ready(function() {
      var jqxhr = $.get( "php/list.php",  function() {
      })

      .done(function(data) {
        var list = JSON.parse(data);
        console.log(list);
        displayThumbnails(list);

      })

      .fail(function() {
        alert( "Oh Snap, Server Error.!!! Try Again" );
        location.reload();
      });
  });
</script>

Answer 1

当到达alert(json)语句时，函数displayThumbnails还没有被调用，所以json的值仍然是''；

Answer 2

您的变量可以通过函数声明内部和声明之后的代码访问。这里的问题，正如另一个答案中提到的那样，填充变量的代码尚未执行。

要确保使用变量的代码仅在变量填充后执行，您可以使用回调函数，类似于：

var json=''; 
// the second parameter should be a function
function displayThumbnails(list, callback) {
  var i, image;
  json = list; 
  for(i in list) { 
    image = $("<img class='item'>").attr("src", list[i].thumbnail);
    $("#showThumbnails").append(image);
  } 
  callback();
} 

doSomethingWithYourVariable = function() {
  alert(json);
};

// you can pass a callback function either by name, 
// then your call then should look similar to this:
displayThumbnails(list, doSomethingWithYourVariable);

// or pass an anonymous callback function:
displayThumbnails(list, function() {
  alert(json);
});

你也不应该在循环中声明一个变量，这会降低性能。

---

回调的简短说明：

您将另一个函数（也称为回调）传递给您的第一个函数调用。在第一个函数完成后，它将/应该在某个时候调用您的回调函数。通过这种方式，您可以获得控制权，我的意思是可以将代码插入到执行中。

在上面的示例中，使用回调并不是很有用，因为所有调用都是同步调用；但是回调在异步环境中提供了真正的价值，并且由于 AJAX 调用始终是异步的，因此它们主要用于那里。

jQuery.get('list.php', function(data) {
  // this already is an asynchronous callback function
  // that will be called when the request completes
});

// code here would be called immediately
// the request will most likely not be completed and no data available

更详细的介绍见Understanding callback functions in Javascript