如何使用 jquery 关闭多个项目的处理程序来重置计时器？

Question

// 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>

考虑上面的代码片段（只有 html 和小的 jquery 代码片段）。

我有好几里的东西。当用户将鼠标悬停在这些 li 项目中的任何一个上时，背景颜色应更改为红色。但是，当它们悬停在“关闭”时，背景颜色应恢复为默认值（透明）。但是，我希望它在悬停事件后有 1000 毫秒的超时。

然而，这并没有像我预期的那样工作（可能是由于单个计时器变量），因为如果我快速将鼠标悬停在多个 li 项目上，那么只有最后一个悬停“关闭”元素被更改为默认背景，同时所有其他 li 项目都停留在红色背景颜色。

更新：

我想为 li 项目单独重置颜色。也就是说，如果我将鼠标悬停在 li-1 上，然后悬停在 li-2 上，然后如果我悬停在 li-1 上，则 li-1 应该被重置，然后在几毫秒后，li-2 应该被重置。我不希望他们同时重置。

Answer 1

您不需要任何计时器对象。只需像这样更改您的脚本：

$(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>

Answer 2

从您的代码中删除清除超时，它将按您的预期工作。

// The Javascript Code
var timer;

$(document).ready(function () {
  $("li").hover(
    function () {
      $(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>

如何使用 jquery 关闭多个项目的处理程序来重置计时器？

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

javascript

jquery

settimeout

jquery-hover