jQuery超时功能不起作用

Question

我正在使用 jQuery 开发一个下拉菜单。我遇到了超时功能根本不起作用的问题。它的代码是：

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

我想做的是为下拉菜单的父级创建悬停延迟。您需要将鼠标悬停在父级上 2 秒钟才能显示下拉菜单。我还想将它与 Slidedown 和 Slideup 效果配对。

Slidedown 和 Slideup 功能正常，但 Timeout 不起作用。

Answer 1

您不能只调用 clearTimeout()（顺便说一下，这不是 JQuery 的一部分），您必须为其提供要取消的计时器的标识符。

此外，setTimeout() 和 clearTimeout() 不是 JQuery 或 JavaScript 的一部分。它们是window 对象的方法，由浏览器提供。它们不是语言 (JavaScript) 或库 (JQuery) 的一部分。

此外，JQuery .hover() method 需要 2 个参数，而您提供 4 个参数。我在下面将它们组合在一起，但不知道您要做什么，您可能需要调整它。

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