Check true/false from within function from other function with jQuery

Question

i've build myself a jQuery filter option on an existing portfolio page. The thing is, theres a onScroll in a function that keeps adding the class 'reveal' on the portfolio items, when they are in the users viewport.

Now i want to disable this function when my function is sort of "running". Here is my code:

  function filterPortfolio() {
    $('[data-filter]').on('click', function() {

    var filterPortfolioIsRunning = true;
    var filter = $(this);
    var filterVal = $(this).attr('data-filter');
    var filterItems = $('[data-filter-item]');

    filter.toggleClass('active');
    filterItems.removeClass('reveal');
    filterItems.closest('.columns').addClass('hidden');

  if ($('[data-filter]').hasClass('active')) {
            $('[data-filter].active').each(function(){
                var filters = $(this).attr('data-filter');
                var object = $('[data-filter-item][data-filter-val*="' + filters + '"]');

                object.closest('.columns').removeClass('hidden');
                object.addClass('reveal');
            });
  } else {
        filterItems.closest('.columns').removeClass('hidden');
        filterItems.addClass('reveal');
  }
});
}

Now i have set "filterPortfolioIsRunning" to true, and want to recognise this in an other jQuery function. This code:

  function revealProject() {
var scrollTop = $(document).scrollTop();
$('.project').each(function(e) {
  if ($(window).width() > 767 && scrollTop > 0) {
    if (($(this).offset().top + ($(this).height() - 200)) < (scrollTop + $(window).height())) {
      $(this).addClass('reveal');
    }
  } else if ($(window).width() < 768) {
    if (($(this).offset().top) < (scrollTop + $(window).height())) {
      $(this).addClass('reveal');
    }
  }

});
if ($('.project').length > 0) {
  setTimeout(function() {
    $('.projects .columns:nth-child(1) .project, .projects .columns:nth-child(2) .project').addClass('reveal');
  }, 2300);

}

}

I have tried doing it like this: && !filterPortfolioIsRunning == true but the console log says it can't find the variable. How can i make this work?

Thanks in advance!

make the variable global to both functions or pass it into the second function — Pete, Dec 13 '18 at 11:05
Declare `var filterPortfolioIsRunning = true;` outside function at global level. — Karan, Dec 13 '18 at 11:05
You would help yourself a lot if you would indent your code properly ;-) — trincot, Dec 13 '18 at 11:05
Possible duplicate of [Define global variable in a JavaScript function](https://stackoverflow.com/questions/5786851/define-global-variable-in-a-javascript-function) — Pete, Dec 13 '18 at 11:06

score 1 · Accepted Answer · answered Dec 13 '18 at 11:13

Instead of a local variable inside the filterPortfolio try moving filterPortfolioIsRunning to the global space or use the data method and store it in an element, like this:

function filterPortfolio() {
  $('[data-filter]').on('click', function() {
    var filterPortfolioIsRunning = true;
    // to stuff then save in the element...
    $('[data-filter]').data('filter', filterPortfolioIsRunning);
  });
}
function revealProject() {
  if ( $('[data-filter]').data('filter') ) {
    // no global variables prevent name collision!
  }
}

score 0 · Answer 2 · answered Dec 13 '18 at 11:08

The variable filterPortfolioIsRunning is declared inside your filterPortfolio function. You should declare your variable outside of that (and any other) function.

This way you will have a global variable accessible from other functions.

Declaring a variable var n = 1; inside a function makes it a local variable of that function
Declaring a variable n = 1; inside a function makes it a global variable
Declaring a variable n = 1; OR var n = 1; outside of any function makes it a global variable

Check true/false from within function from other function with jQuery

2 Answers2