Как предотвратить изменение значения переменной внутри кликов и функции 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); 
    }); 

}); 

NB: Я использую JQuery 1.6, поэтому до сих пор используют live() функцию

При нажатии на <span class="cancel"> как select и span исчезают и удаляются из документа. В то же время это увеличивает стоимость genreLimit по 1

Но если я несколько раз нажмите на х в span затем 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); 
    }); 
});