Question

我有一个jQuery脚本切换导航菜单，然后在五秒后关闭它：

<script>
  $(function() {
    function toggleMenu() {
      $( "#menu-nav" ).toggle( "blind", 500 );
    };
     $( ".nav-open" ).click(function() {
      toggleMenu();
      setTimeout(function(){
         $( "#menu-nav" ).toggle( "blind", 500 );
     }, 5000);
    });
  });
  </script>

效果很好。

我还希望在用户点击其中一个链接时关闭菜单：

 <script>
  $(function() {
    function closeMenu() {
      $( "#menu-nav" ).toggle( "blind", 500 );
    };
     $( ".nav-close" ).click(function() {
      closeMenu();
      return false;
    });
  });
  </script>

它也很棒。

问题是，如果用户点击链接时，计时器仍在运行。当它达到5秒标记时，它会切换，因此菜单会重新出现。然后，如果用户点击显示菜单的元素，它会关闭它，但会重新启动计时器，五秒钟后会出现菜单，所有内容都会失败。

如何让第二个脚本在第一个脚本中取消定时器，或者我只是以错误的方式解决所有这些问题？

提前感谢您的任何帮助！

Answer 1

使用此：

$(function() {
    var timer, menuNav = $("#menu-nav");

    function toggleNav(){ menuNav.toggle("blind", 500); }

    $( ".nav-open" ).click(function() {
        toggleNav();
        timer = setTimeout(function(){
            toggleNav();
        }, 5000);
    });
    $( ".nav-close" ).click(function(e) {
        e.preventDefault();
        window.clearTimeout(timer);
        toggleNav();
    });
});

Answer 2

// when setting the timer
var id = setTimeout(...);

// before executing any other task, cancel timer:
clearTimeout(id);

Answer 3

请勿使用toggle()，而是使用show()和hide()。

Answer 4

我认为您的第一个代码块存在时序问题。但在您的情况下，它不会显示，因为超时值（5000）大于动画值（500）。据我了解，您在动画完成时使用setTimeout再次切换，但更好的方法是提供回调函数。

<script>
  $(function() {
    function toggleMenu() {
      $( "#menu-nav" ).toggle( "blind", 500, function(){ 
               setTimeout(function(){
                           $( "#menu-nav" ).toggle( "blind", 500 );
                          }, 4500);
           });
    };
     $( ".nav-open" ).click(function() {
      toggleMenu();
    });
  });
  </script>

甚至可以通过在队列中添加延迟来实现更好的效果

<script>
      $(function() {
        function toggleMenu() {
          $( "#menu-nav" ).toggle("blind", 500)
                          .delay(4500)
                          .toggle("blind",500);
        };
         $( ".nav-open" ).click(function() {
          toggleMenu();
        });
      });
 </script>

使用这种方法，您的closeMenu脚本就像：

一样简单

$(function() {
    function closeMenu() {
      $( "#menu-nav" ).stop(true,true).toggle( "blind", 500 );
    };
     $( ".nav-close" ).click(function() {
      closeMenu();
      return false;
    });
  });

这不是什么大不了的事，只是为了让它变得更好。如果这不能回答你的主要问题，请原谅我。

JQuery Toggle：取消计时器

4 个答案: