单击按钮时使用 setTimeOut() 临时停止一个函数执行

Question

我有一个由滚动事件触发的动画，它使菜单滑出视图。还有一个按钮，单击该按钮可重新显示菜单。

因为菜单可以通过滚动来关闭，所以当用户点击按钮进入菜单时，如果他们在动画的这段时间内滚动，菜单会再次消失，而动画没有完成。

我在这里整理了一个简化版的动画http://codepen.io/emilychews/pen/evbzMQ

我需要在单击按钮后暂时阻止滚动功能工作，我假设最好使用单击功能上的 setTimeout() 方法来完成？我已经尝试了很多事情，但似乎无法解决它/让它发挥作用。

任何帮助都会很棒。为了快速参考，代码如下

JQUERY

jQuery(document).ready(function($){

    // slide menu to left on scroll
    function hideOnScroll() {
      $(window).scroll(function() {
        if ( $(document).scrollTop() > 1) {

          $('.menubox').css('left', '-25%');

      }

    }); 

  }

  hideOnScroll(); // call hideOnScroll function


  // click handler to bring menu back in
  $('.mybutton').on('click', function() {

      $('.menubox').css('left', '0%');

      var scrollPause = setTimeout(hideOnScroll, 2000)  // temporarily pause hideOnScroll function 

    });

}); //end of jQuery

CSS

body {
 margin: 0;
 padding: 0;
 height: 200vh;}

.menubox {
  top: 100;
  position: fixed;
  width: 20%;
  height: 100%;
  background: red;
  padding: 10px;
  color: white;
  transition: all 2s;
}

.mybutton {
  position: fixed;
  left: 40%;
  top: 50px;
  padding: 5px 10px; 
}

HTML

<div class="menubox">Menu Box</div>

<button class="mybutton">Click to bring back menu</button>

** 另外请注意，为了论坛，我已经简化了动画，实际的动画函数包含 Greensock 代码，但我不想包含这个，以免混淆问题。因此，我不能只使用 .addClass() 和 .removeClass() 或有一种解决方法来更改给定的 CSS 或 scrollTop() 值。在单击调用动画的持续时间内单击按钮时，我需要禁用 hideOnScroll() 函数 - 在示例中为 2 秒。因此，我认为实现这一点的唯一方法是使用 setTimeOut() 方法（我可能错了）。但我无法让它工作。

非常感谢

艾米丽

Answer 1

您可以简单地检查偏移是否完整。

function hideOnScroll() {
  $(window).scroll(function() {
    if ( $(document).scrollTop() > 1) {        
     if( $('.menubox').offset().left == 0 ){
        $('.menubox').css('left', '-25%');          
      }   
   });
 }

http://codepen.io/anon/pen/aJXGbr

Answer 2

我对您的javascript 进行了一些更改。看看

var animating = false;
    $(document).ready(function(){
        function hideOnScroll() {
            $(window).scroll(function() {
                event.preventDefault();
                if ( $(document).scrollTop() > 1 && !animating){
                    console.log("Hiding")
                    animating = true;
                    $('.menubox').animate({'left': '-25%'},2000,function(){
                        animating = false;
                    });
                }
            });
        }

        hideOnScroll();

        $('.mybutton').click(function() {
            var pos = $(window).scrollTop();
            animating = true;
            $('.menubox').animate({'left':'0%'},2000,function(){
                console.log("Finished Opening");
                animating = false;
            });
            console.log("Animating Open");
            var siId = setInterval(function(){
                if(animating){
                    console.log("Preventing Window Scrolling.");
                    $(window).scrollTop(pos);
                }
                else{
                    console.log("Stopping setInterval");
                    animating = false;
                    clearInterval(siId);
                }
            },0);
        });

    });

这将使您的浏览器窗口停止滚动，直到您的菜单打开动画完成。

我还从样式中删除了transitionproperty。

在谷歌浏览器中测试。

如果我误解了您的问题，请告诉我。