Kapanışlar ve Javascript'te gizlilik

Question

this jsfiddle adresinde basit bir Javascript olay kabarcıklandırması örneğim var (adama tıklayın ve domuzu kabarcıklı hale getirin). Genel kapsam dışında var interval = 0; almak için bir kaplamayı nasıl kullanırım, ancak html'de onclick="display('sometext')"'u korur muyum?

var interval = 0; 

function display(animal) { 
    window.setTimeout(function() { showText(animal) }, interval); 
    interval = interval+300; 
    window.setTimeout(function() { clear() }, interval); 
} 

function showText(animal) { 
    $(".alGore").text(animal.toUpperCase()); 
    $("."+animal+"-box").css({'background-color':'#ff0'}); 
} 

function clear(animal) { 
    $(".alGore").text(''); 
    $("*").css({background: 'transparent'}); 
    interval = 0; 
} 

Answer 1

Kapatma yapmak için işlevi başka bir işleve yalnızca sarabilirsiniz. Fakat aynı kapana bağlamak istediğiniz iki işlevi olduğundan, bir nesneye ihtiyacınız vardır. dışarı https://jsfiddle.net/axrpcaq4/16/

Kontrol bu:

var animalBox = function(){ 
    var interval = 0; 
    return { 
    display: function(animal) { 
     var that = this; 
     window.setTimeout(function() { that.showText(animal) }, interval); 
     interval = interval+300; 
     window.setTimeout(function() { that.clear() }, interval); 
    }, 
    showText: function(animal) { 
     $(".alGore").text(animal.toUpperCase()); 
     $("."+animal+"-box").css({'background-color':'#ff0'}); 
    }, 
    clear: function(animal) { 
     $(".alGore").text(''); 
     $("*").css({background: 'transparent'}); 
     interval = 0; 
    } 
    } 
}(); 

Ve HTML:

<div class="center"> 
    <div class="pig-box center" onclick="animalBox.display('pig')"> 
    <img src="http://i.imgur.com/MumugGd.png" alt="pig" class="icon">  
     <div class="bear-box center" onclick="animalBox.display('bear')"> 
     <img src="http://i.imgur.com/p7L5DHL.png" alt="bear" class="icon">  
      <div class="man-box center" onclick="animalBox.display('man')"> 
      <img src="http://i.imgur.com/cKvJT7T.png" alt="man" class="icon"> 
      </div> 
     </div> 
    </div> 
    <div class="alGore"></div> 
</div>