0

我有一个 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 秒标记时，它会切换，因此菜单会重新出现。然后，如果用户单击显示菜单的元素，它会关闭它，但会重新启动计时器，菜单会在五秒钟后出现，然后一切都会变得异常。

如何让第二个脚本取消第一个脚本中的计时器，或者我只是以错误的方式处理所有这些？

提前感谢您的任何帮助！

4

4 回答 4

2

用这个：

$(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();
    });
});
于 2013-05-24T13:56:02.083 回答
1 
// when setting the timer
var id = setTimeout(...);

// before executing any other task, cancel timer:
clearTimeout(id);
于 2013-05-24T13:55:25.397 回答
1

不要使用toggle()，使用show()andhide()代替。

于 2013-05-24T13:56:42.710 回答
0

我认为你的第一个代码块有时间问题。但在您的情况下，它不会显示，因为超时值（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;
    });
  });

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

于 2013-05-24T14:02:28.217 回答