如何防止click和fadeOut函數中變量的值發生變化？

Question

HTML

<div class="dropdown"> 
    <label class="add-genre-filter not-selected">Add genre filter</label> 
    <select class="filter" name="filter[]"> 
     <option value="some-value">Some Item</option> 
     <option value="some-value">Some Item</option> 
     <option value="some-value">Some Item</option> 
     <option value="some-value">Some Item</option> 
    </select> 
    <span class="cancel"> x </span> 
</div> 

JS

$(document).ready(function(){ 
    var genreLimit = 3; 

    $('.dropdown .add-genre-filter').live('click', function(){ 
     genreLimit ? ($(this).parent().append(options) , genreLimit--) : false; 
     console.log(genreLimit); 
    }); 
    $('.dropdown .cancel').live('click', function(){ 
     $(this).prev().fadeOut("normal", function(){ $(this).remove(); }); 
     $(this).fadeOut("normal", function(){ genreLimit++; $(this).remove(); }); 
     console.log(genreLimit); 
    }); 

}); 

注：我使用jQuery 1.6，這就是爲什麼還在使用live()功能

通過點擊<span class="cancel">都select和span淡出並從文檔中刪除。同時也增加了1

的的genreLimit價值，但如果我反覆點擊span的X然後genreLimit值按點擊數量的增加，直至其完全消失出局。我知道它應該像這樣下降，因爲它在click事件中。

但是，我想在fadeOut中只增加一次該值。所以，多次點擊不會改變我的功能。這裏可以做些什麼？

Answer 1

你可以設置一個標誌說，它正在執行褪色..

$(document).ready(function(){ 
    var genreLimit = 3; 
    var is_fading = false; 

    $('.dropdown .add-genre-filter').live('click', function(){ 
     genreLimit ? ($(this).parent().append(options) , genreLimit--) : false; 
     console.log(genreLimit); 
    }); 
    $('.dropdown .cancel').live('click', function(){ 
     if (is_fading) return; // don't run if it is already fading... 

     is_fading = true; 
     // choose the correct callback to 'unlock' the flag.. 
     $(this).prev().fadeOut("normal", function(){ $(this).remove(); is_fading = false;? }); 
     $(this).fadeOut("normal", function(){ genreLimit++; $(this).remove(); is_fading = false;? }); 
     console.log(genreLimit); 
    }); 
});