這個兩段程式碼是在同一個js檔案中

function connectServer(callback) {
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
    } else return;
    xmlhttp.onreadystatechange = function() {
        if
 
 (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            callback(xmlhttp.responseText);
        }
    }
        // 這裡是非同步呼叫的模式
        // 這裡的server是用node啟動的服務端指令碼，返回一個隨機數
    xmlhttp.open('GET', '../server', true);
    xmlhttp.send();
}

下面這裡是為一個button觸發Click時間時請求一個隨機數並寫入內部的元素內容中

        buttons[i].onclick = function
 
(i) {
            return function() {
                if (this.disabled) {return};
                bannedButtons(this, buttons);
                this.childNodes[1].innerHTML = '...';
                this.childNodes[1].style.visibility = 'visible';
                connectServer(function(data) {
                    buttons[i].childNodes[1
 
].innerHTML = data;
                    bannedButtons(null, buttons);
                    enableButtons(buttons);
                    checkInfoIsReady(buttons);
                });
            }
        }(i);

為什麼connectServer(function(data) {….}會是非同步呼叫呢
先看些其他的

      for (var i = 0; i < 5; i++) {
        buttons[i].onclick = function() {
          return function () {
              console.log(i);
           }
        };
      }

這種形式是事件觸發的時候是 return內層函式 而不是我們想要的記憶體函式的執行結果

      for (var i = 0; i < 5; i++) {
        buttons[i].onclick = function() {
          console.log(i);
        }(i);
      }

上面的程式碼會在控制檯輸出0,1,2,3,4,五 行
這是因為function(){}(i)這樣子寫就相當於直接運行了這個函式 不用等事件觸發

      for (var i = 0; i < 5; i++) {
        buttons[i].onclick = function(i) {
          console.log(i);
        }(i);
      }
      或
      for (var i = 0; i < 5; i++) {
        buttons[i].onclick = function(x) {
          console.log(x);
        }(i);
      }

發現結果同上 可以發現是i引數覆蓋事件引數x變成i， 但是依舊不是事件觸發的時候才執行

      for (var i = 0; i < 5; i++) {
        buttons[i].onclick = function() {
          return function() {
                console.log(i);
          }
        }(i);
      }

理解js的垃圾回收機制對閉包有很大幫助， 記住一點js不會回收需要用到的東西 而閉包正式要使用大外部變數的東西，所以如果外部的變數沒有被回收 那麼你才有可能訪問到你需要的值
這樣子寫閉包是不對的因為那個console中的i不是(i)因為根本就沒有產生關係，是因為記憶體函式根本就沒有接收到你傳的引數i，所以console的i會自動向上層查詢i變數，因為是事件觸發非同步的所以此時的i都是5 正確的寫應該是這樣子的 如下

      for (var i = 0; i < 5; i++) {
        buttons[i].onclick = function(i) {
          return function() {
                console.log(i);
          }
        }(i);
      }
或
      for (var i = 0; i < 5; i++) {
        buttons[i].onclick = function(x) {
          return function() {
                console.log(x);
          }
        }(i);
      }

這樣子寫就能保證i在往上尋找時，找到的是你用外部i賦給i變數的值

這裡那麼多的內容是幫助理解閉包的工作原理 只是加深對js的理解，從以上的例子可以看出， 這種事件觸發 並不是說直接最後執行，而是按照順序執行， 只是你不按閉包來寫 就感覺是最後才執行 其實依舊是順序的執行 只不過是非同步的觸發 注意閉包外層的那裡的（i）加上，如果沒有當你觸發的時候就是返回內層函式，而我們希望的是要執行內層函式，更進一步 你可以看到內層的x其實是新建的變數儲存i變數的值，並不是i變數 根據js垃圾回收機制，你能發現x是不會被回收的，也就是實際上有五個x變數
如果你不用閉包，那麼你就只能使用到最後一個i變數其值是5，這也就是常見的迴圈中放事件的結果不和你的料想一致的原因

接著 我們再來看 為什麼那裡的ajax為非同步的呼叫 首先明確一點在非同步模式中沒有return這種說法，並且都是採用回撥函式callback處理非同步 這兩點很關鍵 ， 不注意這兩點 可能你就會掉到坑裡

function connectServer(callback) {
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
    } else return;
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            callback(xmlhttp.responseText);
        }
    }
        // 這裡是非同步呼叫的模式
        // 這裡的server是用node啟動的服務端指令碼，返回一個隨機數
    xmlhttp.open('GET', '../server', true);
    xmlhttp.send();
}

        buttons[i].onclick = function(i) {
            return function() {
                if (this.disabled) {return};
                bannedButtons(this, buttons);
                this.childNodes[1].innerHTML = '...';
                this.childNodes[1].style.visibility = 'visible';
                connectServer(function(data) {
                    buttons[i].childNodes[1].innerHTML = data;
                    bannedButtons(null, buttons);
                    enableButtons(buttons);
                    checkInfoIsReady(buttons);
                });
            }
        }(i);

分析如下
當用戶觸發button的點選事件時， 觸發connectServer （）函式的執行這裡首先是把一個匿名函式穿給callback這個引數，然後穿件一個XMLHttpRequest 物件，使用get方式非同步的向伺服器這裡即是server指令碼請求資料，接著這裡的onreadystatechange會仍入一個佇列（這個佇列是專門來對非同步程式儲存的） 當輪到非同步佇列進行時這個函式得到執行， 也就是說如果你的程式有一個普通的死迴圈程式， 那麼你不可能得到觸發的結果， 因為普通程式碼的處理總是在非同步佇列的前面， 當服務端處理完成請求ok且可以響應了 然後執行裡面的callback函式，剛才已經說了callback被函式賦值，而這裡的data資料得到的就是服務端返回的資料， 接著就是對這個資料進行處理了， 這樣就解決了非同步排程的問題，因為後面的程式碼是依賴服務端返回的資料的，剛好這種回撥函式的方法，解決了非同步的問題

綜上
再感悟下， 就是事件觸發處理非同步，也就是把利用垃圾回收機制，讓所需要的變數不被回收，或者覆蓋，從而實現，觸發的時候是你所期望的值

再感悟下， 就是回撥函式處理非同步，也就是把要處理的東西，帶到非同步佇列的感覺， 就是把要處理的東西，放到只有處理完才會進行的後面， 一般帶延遲的東西，都是會拋到非同步佇列的， 所以你的程式碼也要放在非同步中，防止再還沒來得及得到資料時，先行處理完了