Only allow one jQuery function to execute at a time

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

A simple solution would perhaps be to declare a global variable that keep tabs on when a function is running, and checking it before running other functions.