一次只允许一个jQuery函数执行

Question

I have a grid layout and I am using jQuery to change what is displayed in each grid depending on which grid was clicked. At the moment I can click a grid and it changes and then if I click the same grid it goes back to the default but after their initial click If they happen to click in another grid it will trigger another function. I cannot hide the div's because I am using them to display content. I would like to only let one function be triggered at a time. Below is my code.

(function() {
    var count = 0;

    jQuery('#home-grid-one-two').click(function () {
        count += 1;
        jQuery('#home-grid-two-one').css({
            'visibility': 'hidden' 
        });
        jQuery('#home-grid-two-two').css({
            'visibility': 'hidden' 
        });
        jQuery('#home-grid-two-three').hide();
        jQuery('#home-grid-three-two').css('background-image',   'url("A PICTURE")');
        jQuery('#home-grid-three-two').css({
            'background-size': 'cover' 
        });
        jQuery('#home-grid-three-three').hide();
        jQuery('#home-grid-two-two').css({
            'margin-top': '-450px' 
        });
        jQuery('#home-grid-three-two').css({
            'margin-top': '-420px' 
        });
        jQuery(".leftpara").show();
        jQuery(".rightpara").show();
        jQuery(".ptagexp").hide();


        if (count == 2) {
            jQuery('#home-grid-two-one').css({
                'visibility': 'visible' 
            });
            jQuery('#home-grid-two-two').css({
                'visibility': 'visible' 
            });
            jQuery('#home-grid-three-two').show();
            jQuery('#home-grid-three-two').css('background-image',   'none');
            jQuery('#home-grid-two-two').css({
                'margin-top': '0px' 
            });
            jQuery('#home-grid-three-two').css({
                'margin-top': '0px' 
            });
            jQuery('#home-grid-two-one').show();
            jQuery('#home-grid-three-one').show();
            jQuery('#home-grid-two-three').show();
            jQuery('#home-grid-three-three').show();
            jQuery(".leftpara").hide();
            jQuery(".rightpara").hide();
            jQuery(".ptagexp").show();
            count = 0;
        }
    });
})();

(function() {
    var count = 0;
    jQuery('#home-grid-three-two').click(function () {
        count += 1;
        jQuery('#home-grid-one-one').css('background-image',     'url("A PICTURE")');
        jQuery('#home-grid-one-one').css({
            'background-size': 'contain',
            'background-repeat': 'no-repeat',
            'background-position': '50%'
        });


        jQuery('#home-grid-one-two').css('background-image',     'url("A PICTURE")');
        jQuery('#home-grid-one-two').css({
            'background-color': 'transparent',
            'background-size': 'contain',
            'background-repeat': 'no-repeat',
            'background-position': '50%'
        });


        if (count == 2) {
            jQuery('.home-grid').css('background-image',     'none');
            jQuery('#home-grid-one-two').css('background-color',     '#cccccc');
            jQuery('#home-grid-two-one').css('background-color',     '#cccccc');
            jQuery('#home-grid-two-three').css('background-color',   '#cccccc');
            jQuery('#home-grid-three-two').css('background-color',   '#cccccc');
            jQuery('#home-grid-one-two').find('p').show();
            jQuery('#home-grid-two-one').find('p').show();
            jQuery('#home-grid-two-two').find('p').show();
            jQuery('#home-grid-two-three').find('p').show();
            jQuery('#home-grid-three-two').find('p').show();
            count = 0;
        }
    });
})();

Answer 1

一个简单的解决方案可能是声明一个全局变量，它在函数运行时密切关注，并在运行其他函数之前检查它。

Answer 2

Just make them unclickable (should work in most browsers but I have not tested all) by adding and removing a couple of classes. (saves binding/unbinding which could get messy)

sample fiddle to play with: http://jsfiddle.net/MarkSchultheiss/3mLzx3o7/

Example html:

<div class="mygrids active">one</div>
<div class="mygrids">two</div>
<div class="mygrids">three</div>
<div class="mygrids">four</div>
<div class="mygrids">five</div>
<div id='showactive'>active:<span>none</span></div>

Sample CSS

.mygrids.inactive { pointer-events: none; }
.mygrids.active { pointer-events: auto; 
border: solid lime 1px;}

sample code

$('.mygrids').on('click',function(){
    $('#showactive>span').text($(this).text());
    if ($(this).hasClass('active')){
        $(this).removeClass('active');
        $(this).siblings().removeClass('inactive');
    }
    else{
        $(this).addClass('active');
        $(this).siblings().addClass('inactive');
    }
});
$('.mygrids').not('.active').addClass('inactive');