Question

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

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

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

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

Answer 1

你不能只调用 clearTimeout() （顺便说一句，这不是JQuery的一部分），你必须为它提供一个你要取消的计时器的标识符。 / p>

此外，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>

jQuery超时功能无法正常工作

1 个答案: