CODEWITHSUNDEEP
javascriptjquery
Mickey B
Mickey B

Reputation: 49

How to disable a jquery function from executing for a certain amount of time

I have a jQuery function that calculates the distance between two slideshows and detects to see if they have been scrolled past yet and tells it to display the first slide with important information on it.

However, it displays it once, but then the if statement loops and keeps displaying it, which would be expected.

I am wondering if there is a way to force the function to wait 25-ish seconds before it executes again? Any help would be much appreciated.

Here is the jQuery code:

$(window).scroll(function() {
  $('.infoIdentifier').each(function() {
    var scroll = $(window).scrollTop();
    var objectpos = $(this).offset().top - 600;
    var nextobject = $(this).parent().nextAll('.slideshow').children(".infoIdentifier")
    if (nextobject.length === 0) {
      var nextobjectpos = 10000;
    } else {
      var nextobjectpos = nextobject.offset().top - 600;
    }
    if (scroll > objectpos && scroll < nextobjectpos) {
      var $this = $(this).parent('.slideshow');
      var $currentSlide = $this.find('.active');
      var $nextSlide = $this.children('.jumbotron').first();
      $nextSlide.fadeIn(500).addClass('active');
      $currentSlide.fadeOut(500).removeClass('active');
    }
  });
});

As for HTML, the slideshows are held in a main container, and each slide show with important information is tagged as class = 'infoIdentifier'. This part of the function does its job. The calculations are fine and the application of classes is fine, however, how do I disable the if (scroll > objectpos && scroll < nextobjectpos){ statement for x amount of seconds. Any help would be much appreciated. Thank you!

Upvotes: 0

Views: 65

Answers (1)

Jon Uleis
Jon Uleis

Reputation: 18639

Here's one way to achieve this. I added a boolean outside of your scroll function called wait, which is set to false initially.

Then I added !wait as a condition to your if logic, which means it will only validate if wait is currently false.

Then inside that block, I set wait to true, and started a setTimeout for 25 seconds, after which wait is set back to false.

During those 25 seconds, that slideshow code will not run.

var wait = false;

$(window).scroll(function() {
  $('.infoIdentifier').each(function() {
    var scroll = $(window).scrollTop();
    var objectpos = $(this).offset().top - 600;
    var nextobject = $(this).parent().nextAll('.slideshow').children(".infoIdentifier")
    if (nextobject.length === 0) {
      var nextobjectpos = 10000;
    } else {
      var nextobjectpos = nextobject.offset().top - 600;
    }
    if (!wait && scroll > objectpos && scroll < nextobjectpos) {
      var $this = $(this).parent('.slideshow');
      var $currentSlide = $this.find('.active');
      var $nextSlide = $this.children('.jumbotron').first();
      $nextSlide.fadeIn(500).addClass('active');
      $currentSlide.fadeOut(500).removeClass('active');

      wait = true;
      setTimeout(function() {
        wait = false;
      }, 25000);
    }
  });
});

Upvotes: 1

Related Questions