javascript - 在ajax回调函数之外使用变量

Question

在回调函数之外使用全局变量的最佳方式是什么？

    var icon; 
    $(function(){

      $.get('data.xml', function(xml){

           icon = xml.documentElement.getElementsByTagName("icon");
           //this outputs a value
           console.log(icon);
       });
       //this is null
       //How can this maintain the value set above?
       console.log(icon);
    });

Answer 1

您提供的代码完全有效 - 事实上，icon 确实“维持”了它的值(value)。问题很可能是 get() 异步运行 - 仅在 'data.xml' 完全加载后调用匿名函数从服务器。所以现实世界的执行顺序看起来像这样:

1. 调用 get('data.xml', function(xml){...}) (开始加载 data.xml)
2. 调用 console.log(icon) (此时 icon 仍为 null)
3. (data.xml 已完成加载)现在调用匿名函数，该函数将值分配给 icon:icon = xml.documentElement.getElementsByTagName("icon") .

如果您想对 icon 的值执行某些操作，在获取“data.xml”后，那么您需要执行此操作>在匿名回调函数内。像这样:

var icon; 
$(function(){

  $.get('data.xml', function(xml){
       icon = xml.documentElement.getElementsByTagName("icon");
       console.log(icon);
   });
});

祝你好运!

<小时/>

注意:您仍然可以在匿名函数外部的代码中使用icon，但您需要等待之后 匿名函数已运行。执行此操作的最佳方法是将依赖代码放入其自己的函数中，然后从回调函数中调用该函数:

var icon; 
$(function(){

  $.get('data.xml', function(xml){
       icon = xml.documentElement.getElementsByTagName("icon");
       loadIcon();
   });

   function loadIcon() {
       console.log(icon);
       // ... do whatever you need to do with icon here
   }
});