回調地獄

何為回調函數

setTimeout(function () {
  console.log('callback...');
}, 1000);

此延時定時器中的function就是我們常說的回調函數，回調函數常常滿足三個特征

• 我們自己定義的
• 我們自己沒去執行
• 最終被其它人（瀏覽器的ajax模塊，定時器模塊...）執行了

 

何為回調地獄

setTimeout(function (name) {
  var catList = name + ',';

  setTimeout(function (name) {
    catList += name + ',';

    setTimeout(function (name) {
      catList += name + ',';

      setTimeout(function (name) {
        catList += name + ',';

        setTimeout(function (name) {
          catList += name;

          console.log(catList);

        }, 1, 'Lion');

      }, 1, 'Snow Leopard');

    }, 1, 'Lynx');

  }, 1, 'Jaguar');}, 1, 'Panther');

由於回調函數是異步的，在上面的代碼中每一層的回調函數都需要依賴上一層的回調執行完，所以形成了層層嵌套的關系最終形成類似上面的回調地獄，但代碼以此種形式展現時無疑是不利於我們閱讀與維護的，此時就要想辦法改進這種代碼形式。

 

初次改進

    var catList = '';

    setTimeout(getPanther, 1, 'Panther');

    function getPanther(name) {
        catList += name + ',';
        setTimeout(getJanguar, 1, 'Janguar');
    }

    function getJanguar(name) {
        catList += name + ',';
        setTimeout(getLynx, 1, 'Lynx');
    }

    function getLynx(name) {
        catList += name + ',';
        setTimeout(getSnowLeopard, 1, 'Snow Leopard');
    }

    function getSnowLeopard(name) {
        catList += name + ',';
        setTimeout(getLion, 1, 'Lion');
    }

    function getLion(name) {
        catList += name;
        setTimeout(print, 1);
    }

    function print() {
        console.log(catList);
    }

將匿名函數命名

雖然匿名函數使用方便，但是不利於我們閱讀與書寫，所以我們選擇將回調函數單獨的拿出來並命名，寫成如上形式，這樣看上去就要比第一次的代碼優雅清晰很多。需要注意的是上面的代碼相比之前有了幾點改變。

1. catList變成了全局變量

2. 函數的作用域發生了變化，從局部作用域變成了全局作用域，所以才需要將catList變成全局變量以保證每個函數都可以訪問的到

通常情況下我們不希望有全局變量污染環境，並且上面的代碼還有一些可以復用的空間，可以看到我們在每個函數中都重復的調用定時器，所以我們可以再來改進一下上面的代碼。

 

再次改進

 

    function buildCatList(list, returnVal, fn) {
        setTimeout(function (name) {
            var catList = list === '' ? name : list + ',' + name;
            fn(catList);
        }, 1, returnVal);
    }


    buildCatList('', 'Panther', getJanguar);

    function getJanguar(list) {
        buildCatList(list, 'Janguar', getLynx);
    }

    function getLynx(list) {
        buildCatList(list, 'Lynx', getSnowLeopard);
    }

    function getSnowLeopard(list) {
        buildCatList(list, 'Snow Leopard', getLion);
    }

    function getLion(list) {
        buildCatList(list, 'Lion',print);
    }

    function print(list) {
        console.log(list);
    }

 

定時器中的回調函數處在外層函數中的作用域內，並通過參數傳入，沒有產生全局變量，沒有重復代碼。