title: How to have a delay effect on hover delegation in jquery?
body: <p>I want to use jquery event delegation technique for hover events. But I only want the hover code to trigger after a second of hovering on. So far I have this:</p>
  
  <pre><code>        $('body').on('mouseenter', "a", function( event ) {
  
              var interval = setTimeout(function() {  
  
  
              }, 1000);   
  
          }).on('mouseleave', "a", function( event ) {
  
  
          });
  </code></pre>
  
  <p>Which delays the function by a second, but what I don't get is how to cancel the timeout if the user moves the mouse out. I know there is <code>clearTimeout</code> but I don't know how to use it, like how do I get the interval number for the correct <code>a</code> tag.</p>
  
  <p>And we can't assume that the <code>a</code> will have any relevant attribute like <code>name</code> or <code>id</code>.</p>
  
  <p>Does anyone know?</p>
  
  <p>Thanks</p>