为什么我的全局变量不被另一个函数看到？

Question

This is the most irritating problem I have ever faced:

var appslst = [];
function f1()
{
    chrome.management.getAll(function(lst)
    {
    appslst = lst;
    });
}

function f2() // this function isn't working!!
{
    var l = appslst.length;
    var ind = 0;
    while(ind < l)
    {
        document.getElementById("here").value = document.getElementById("here").value.concat(String(ind), ". ", appslst[ind].name, "\n");
        ind += 1;
    }
}

function f3()
{
     f1();
     f2();
}

I believe that appslst - as it's a global variable - should be seen in both functions f1() and f2() , but the above code isn't working and I have no idea why.

Also, I have tried the following code (and it's working) :

var appslst = [];
function f1()
{
    chrome.management.getAll(function(lst)
    {
        appslst = lst;
        var l = appslst.length;
        var ind = 0;
        while(ind < l)
        {
            document.getElementById("here").value = document.getElementById("here").value.concat(String(ind), ". ", appslst[ind].name, "\n");
            ind += 1;
        }
    });
}

Some more details. I'm learning how to build extension for Google Chrome. I have download the sample: http://code.google.com/chrome/extensions/examples/extensions/app_launcher.zip from this link: http://code.google.com/chrome/extensions/samples.html . I had a look over the code and found the same code I wrote, except that it's working!

Here's the part I'm talking about:

function onLoad()
{
  chrome.management.getAll(function(info)
  {
    var appCount = 0;
    for (var i = 0; i < info.length; i++) {
      if (info[i].isApp) {
        appCount++;
      }
    }
    if (appCount == 0) {
      $("search").style.display = "none";
      $("appstore_link").style.display = "";
      return;
    }
    completeList = info.sort(compareByName);
    onSearchInput();
  });
}

Answer 1

chrome.management.getAll is asynchronous - hence you need to pass a function that is executed only when Chrome is done executing getAll .

This means that f1(); f2(); f1(); f2(); will go like this:

• f1 is called
• getAll is called (that's what f1 is doing)
• f2 is called
• iterating over appslst (that's what f2 is doing)
• (some time in between)
• getAll is done; the function passed to it is called
• appslst is filled with data from getAll (that's what the passed function is doing)

In other words, appslst is still empty at the time f2 is called. So you need to suspend f2() as well:

chrome.management.getAll(function(lst){
    appslst = lst;
    f2(); // only run when getAll is done and appslst is filled
});