jQuery Timeout Function not working

Question

I am working on a currently working on a dropdown menu using jQuery. I have run into an issue where the Timeout function is not working at all. The code for it is:

$(document).ready(function() {
  $('.has-sub').hover(
    function() {
      $('ul', this).stop(true, true).slideDown(500);
    },
    function() {
      $('ul', this).stop(true, true).slideUp(400);
    },
    function() {
      setTimeout(function() {
        $('.has-sub').addClass("tap");
      }, 2000);
    },
    function() {
      $(this).removeClass("tap");
      clearTimeout();
    }
  );

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

What I trying to do is to create a hover delay for parent of the Dropdown. You would need to hover over the parent for 2 seconds for the Dropdown menu to appear. I also want to pair that with a Slidedown and Slideup effect.

The Slidedown and Slideup functions correctly but the Timeout does not work.

Answer 1

You can't just call clearTimeout() (which is not part of JQuery, by the way), you must provide it with an identifier for the timer you want to cancel.

Also, setTimeout() and clearTimeout() are not part of JQuery or JavaScript for that matter. They are methods of the window object, which is supplied by the browser. They are not part of the language (JavaScript) or the library (JQuery).

Additionally, the JQuery .hover() method takes 2 arguments and you are providing 4. I have combined them below, but not knowing exactly what you are trying to do, you may need to adjust that.

$(document).ready(function() {
  
  // This will represent the unique ID of the timer
  // It must be declared in a scope that is accessible
  // to any code that will use it
  
  var timerID = null; 
  
  $('.has-sub').hover(
    function() {
      
      // Clear any previously running timers, so
      // we dont' wind up with multiples. If there aren't
      // any, this code will do noting.
      clearTimeout(timerID);
      
      $('ul', this).stop(true, true).slideDown(500);
      // Set the ID variable to the integer ID returned
      // by setTimeout()
      timerID = setTimeout(function() {
        $('.has-sub').addClass("tap");
      }, 2000);
    },
    function() {
      $('ul', this).stop(true, true).slideUp(400);
      $(this).removeClass("tap");
      // Clear the particular timer based on its ID
      clearTimeout(timerID);
    }
  );

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>