javascript - Don't execute setTimeout if condition changes - Stack Overflow

I have the following code, that changes the class of a div when you scroll down. The problem is if you scroll very fast (or if I put links to a div in my menu) the timeout function doesn't execute just the last condition but all of them as a sequence. What I want to do is if the condition changes while the function is within the timeout to skip the function and check for the next condition.

  $(document).scroll(function() {    
  var about = jQuery('#hh1').position().top;
  var portfolio = jQuery('#hh2').position().top;
  var services = jQuery('#hh3').position().top;
  var workingprocess = jQuery('#hh4').position().top;
  var clients = jQuery('#hh5').position().top;
  var blog = jQuery('#hh6').position().top;
  var contact = jQuery('#hh7').position().top;
  var scroll = $(this).scrollTop();
  if (scroll >= hh1-90 && scroll < hh3-90 || scroll >= hh5-90 && scroll < hh6-90)
  {setTimeout('$(".div").addClass("MyClass")',3440);}
  else 
  {
  setTimeout('$(".div").removeClass("MyClass")',3440);
  }
  });

I have the following code, that changes the class of a div when you scroll down. The problem is if you scroll very fast (or if I put links to a div in my menu) the timeout function doesn't execute just the last condition but all of them as a sequence. What I want to do is if the condition changes while the function is within the timeout to skip the function and check for the next condition.

  $(document).scroll(function() {    
  var about = jQuery('#hh1').position().top;
  var portfolio = jQuery('#hh2').position().top;
  var services = jQuery('#hh3').position().top;
  var workingprocess = jQuery('#hh4').position().top;
  var clients = jQuery('#hh5').position().top;
  var blog = jQuery('#hh6').position().top;
  var contact = jQuery('#hh7').position().top;
  var scroll = $(this).scrollTop();
  if (scroll >= hh1-90 && scroll < hh3-90 || scroll >= hh5-90 && scroll < hh6-90)
  {setTimeout('$(".div").addClass("MyClass")',3440);}
  else 
  {
  setTimeout('$(".div").removeClass("MyClass")',3440);
  }
  });

• javascript
• jquery
• html

Share Improve this question Follow asked Sep 15, 2013 at 23:48 IvanIvan 3311 silver badge44 bronze badges 4

• Apart from other problems, I am scared at the fact that your scroll event handler is setting multiple timeouts and not clearing them. This will slow down you script A LOT. You have to clear your timeout when not needed. – Starx Commented Sep 16, 2013 at 0:00
• What are the other problems? Please tell me? I would like to fix them – Ivan Commented Sep 16, 2013 at 0:11
• 1 For reference: $('.div').toggleClass('MyClass', shouldHaveClass); will get rid of the need for the if/else. Just take the condition you're currently using for the if, and assign it to a variable named shouldHaveClass instead. – cHao Commented Sep 16, 2013 at 0:13
• Lobo has pointed them out. One is using an anonymous functions or an actual function instead of passing string. – Starx Commented Sep 16, 2013 at 0:16

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

setTimeout(...) method takes a function to execute when the timeout occurs. You are not sending it a function.

setTimeout('$(".div").addClass("MyClass")',3440);

Change this to

setTimeout(function(){$(".div").addClass("MyClass")},3440);

and then -

You have to store the numerical timeout id returned by the setTimeout(...) method and use it to clear the timeout clearTimeout(...).

Save the timeout id like

timeoutID = setTimeout(function(){$(".div").addClass("MyClass")},3440);

and then use it to clear the timer.

clearTimeout(timeoutID);

You don't need to check if the timeout has occurred or not because if the timeout occurred, the function specified would have been called already and if it hasn't, you need to clear it. So, just clear the timeout when the condition changes.

Try this:

var addClass = function() {
    $(".div").addClass("MyClass");
}

var removeClass = function() {
    $(".div").removeClass("MyClass");
}

if (scroll >= hh1-90 && scroll < hh3-90 || scroll >= hh5-90 && scroll < hh6-90)
  {
      setTimeout( myClass,3440);
  }
  else 
  {
      setTimeout(removeClass,3440);
  }