揭示模塊模式和超時

Question

我想知道如果有人可以給我一個簡單的解決方案。

我想要兩個狗實例重複樹皮+搖擺尾巴組合。

如果所有的邏輯都包含在barkNameAndTime函數中，我很好，但通過setTimout調用wagTail，我失去了上下文。我不寫很多的JS，所以我的封閉知識是一個litle生鏽，我似乎無法找到一個乾淨的解決方案。

問題是，Baloo結束了做所有的狗叫聲和尾巴搖和Lola在人羣:)失去

感謝 瓦里克

<script type="text/javascript"> 
$(document).ready(function() { 
    var zDog1 = new dog("Lola"); 
    var zDog2 = new dog("Baloo"); 

    zDog1.bark(); 
    zDog2.bark(); 
}); 

function dog(aName) { 
    var name = aName, 
     barkNameAndTime = function() { 
      var time = new Date().getTime(); 
      $('#MyDiv').html($('#MyDiv').html() + "<br />" + name + " barked @ " + time); 
      setTimeout(wagTail, 1000); 
     }; 

     wagTail = function() { 
      var time = new Date().getTime(); 
      $('#MyDiv').html($('#MyDiv').html() + "<br />" + name + " wagged tail @ " + time); 
      setTimeout(barkNameAndTime, 1000); 
     } 

    return { 
     bark: barkNameAndTime 
    }; 
} 

Answer 1

在您的實現， wagTail是一個全局變量（可能是錯誤的），因此每次創建新的狗對象時都會替換其全局值和上下文。

如果你把它作爲一個局部變量（通過改變一個逗號分號），它應該工作。

function dog(aName) { 
    var name = aName, 
     barkNameAndTime = function() { 
      var time = new Date().getTime(); 
      $('#MyDiv').html($('#MyDiv').html() + "<br />" + name + " barked @ " + time); 
      setTimeout(wagTail, 1000); 
     }, 

     wagTail = function() { 
      var time = new Date().getTime(); 
      $('#MyDiv').html($('#MyDiv').html() + "<br />" + name + " wagged tail @ " + time); 
      setTimeout(barkNameAndTime, 1000); 
     } 

    return { 
     bark: barkNameAndTime 
    }; 
} 

當它是一個局部變量，那麼wagTail每個副本保持其自己的上下文關閉（並因此獲得了局部變量在其相同的堆棧幀）。當它是一個全局變量時，所有對wagTail的調用都將具有相同的上下文，該上下文將成爲上次分配給它的上下文。

僅供參考，這是我不喜歡用這種方式來聲明局部變量的原因之一，因爲當有多行初始值設定項時，因爲一個微妙的類型錯誤會導致其中一些隱式的全局變量。我寧願預先聲明當地人，然後在體內分配給他們。遭受這個錯誤的可能性要小得多。或者說，在這種情況下，你不需要使用變量的語法，你可能只是宣佈barkNameAndTime和wagTail本地功能（通過添加BERGI代碼示例）：

function dog(name) { 
    function barkNameAndTime() { 
     var time = new Date().getTime(); 
     $('#MyDiv').html($('#MyDiv').html() + "<br />" + name + " barked @ " + time); 
     setTimeout(wagTail, 1000); 
    } 
    function wagTail() { 
     var time = new Date().getTime(); 
     $('#MyDiv').html($('#MyDiv').html() + "<br />" + name + " wagged tail @ " + time); 
     setTimeout(barkNameAndTime, 1000); 
    } 

    return { 
     bark: barkNameAndTime 
    }; 
}