Search code examples
javascriptjquerysettimeoutjquery-hover

How to reset timer using jquery off handler for multiple items?

// The Javascript Code
var timer;

$(document).ready(function () {
  $("li").hover(
    function () {
      clearTimeout(timer);
      $(this).css("background-color", "red");
    },
    function () {
      var $self = $(this);
      timer = setTimeout(function () {
        $self.css("background-color", "transparent");
      }, 1000);
    }
  );
});
<!-- The HTML -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <h1>title</h1>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
  </ul>
</div>

Consider the above code snippet(has only html and small jquery code snippet).

What I have are multiple li items. When the user hover's over any of these li items, the background-color should change to red. However, when they hover "off", the background-color should go back to the default value(transparent). However, I want this to have a timeout of 1000ms after the hover-off event.

However this is not working as I expected(maybe due to single timer variable) as in if I hover over multiple li items quickly, then only the last hover "off'd" element is being changed to default background while all other li items are stuck at background-color of red.

Update:

I want the color to be reset individually for li item. That is if I hover over li-1, then li-2 and then if I hover off, then li-1 should be reset and then after some milliseconds, li-2 should be reset. I don't want them to reset all at the same time.

Solution

  • You need not to have any timer object. Simply change your script like:

    $(document).ready(function () {
$("li").hover(
function () {
  
  $(this).css("background-color", "red");
},
function () {
  var $self = $(this);
  setTimeout( function(){ 
$self.css("background-color", "transparent");
      }  , 1000 );
  
});
});


    var timer;

$(document).ready(function () {
  $("li").hover(
    function () {
      
      $(this).css("background-color", "red");
    },
    function () {
      var $self = $(this);
      setTimeout( function(){ 
    $self.css("background-color", "transparent");
  }  , 1000 );
      
    }
  );
});
    <html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <h1>title</h1>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
  </ul>
</div>
</body>
</html>