Javascript 单击按钮时，使用setTimeOut（）临时停止一个函数的执行

我有一个由滚动事件触发的动画，它使菜单滑出视图。还有一个按钮，单击该按钮可将菜单恢复到视图中

由于可以通过滚动关闭菜单，因此当用户单击按钮将菜单带入时，如果他们在动画的这段时间内滚动，菜单将再次消失，而动画不会完成

我在这里制作了一个简化版的动画

我需要暂时阻止scroll函数在单击按钮后工作，我假设最好使用click函数上的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

HTML

菜单框
单击以返回菜单

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

非常感谢

---

Emily

我对您的

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);
        });

    });

这将阻止浏览器窗口滚动，直到菜单打开动画完成

我还从样式中删除了

转换

属性

在谷歌浏览器上测试

---

如果我误解了您的问题，请通知我。

我对您的

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);
        });

    });

这将阻止浏览器窗口滚动，直到菜单打开动画完成

我还从样式中删除了

转换

属性

在谷歌浏览器上测试

---

如果我误解了您的问题，请通知我。

您只需检查偏移量是否完整即可

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

---

您只需检查偏移是否完成即可

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

---

我知道你的问题。。我实施了它，并试图自己解决它。。我认为您没有使用css中的默认转换属性尝试-webkit转换和-moz转换。。。如果你使用它，那么它肯定会完成它的动画，而不考虑任何其他动作。嗨，Tirstraj，这不是我试图解决的问题。我放了一个基本的动画来说明我需要做什么。我想要发生的是，当单击按钮将菜单返回时，hideOnScroll（）函数被设置为false并持续2000毫秒。我已经更新了CSS，所以动画会在旧浏览器上显示，谢谢。在我发表评论后，我理解了你的问题。。我考虑了一段时间。。我还在努力。。将很快分享解决方案。。！我有你的问题。。我实施了它，并试图自己解决它。。我认为您没有使用css中的默认转换属性尝试-webkit转换和-moz转换。。。如果你使用它，那么它肯定会完成它的动画，而不考虑任何其他动作。嗨，Tirstraj，这不是我试图解决的问题。我放了一个基本的动画来说明我需要做什么。我想要发生的是，当单击按钮将菜单返回时，hideOnScroll（）函数被设置为false并持续2000毫秒。我已经更新了CSS，所以动画会在旧浏览器上显示，谢谢。在我发表评论后，我理解了你的问题。。我考虑了一段时间。。我还在努力。。将很快分享解决方案。。！不，那不是我需要的。我需要在click函数中添加一条语句，以便在单击按钮时，hideOnScroll函数在动画期间基本上处于禁用状态，因此如果有人在菜单滑出屏幕时意外滚动，它不会在退出屏幕的中途滑回。我无法通过更改CSS或滚动顶部位置来解决此问题，它必须由setTimeout（）控制（或类似），在单击按钮后的菜单滑出动画期间，实际上禁用hideOnScroll（）函数。谢谢你的尝试。我还编辑了问题底部的注释，这可能会让问题更清楚。我可能需要在没有任何动画代码的情况下发布一个不同的问题，并在每个代码块中显示两个带有“代码在这里”的函数，以防止混淆。然后可以使用全局布尔变量来完成此操作，该变量可以在buttonClick函数中设置为true或false，并且可以在hideOnScroll（）函数？我就是这么想的，并且一直在尝试。如果我可以全局地将hideOnScroll（）函数设置为true，然后在setTimeOut（）中的click函数中将其设置为false，那么我就不知道如何将函数调用设置为true（我是Javascript新手）。我以为会是这样的：var scrollCall=hideOnScroll（）；scrollCall=true；然后在click函数中设置超时（scrollCall=false，2000）；但是这不好用<代码>窗口javascript中的对象是您的实际浏览器窗口。。此外，javascript在流中是完全异步的。。因此，hideOnScroll函数有一个$（window）.scroll（），它还有一个函数，在该函数中，您可以使用if条件来检查scrollTop是否大于1。。太好了。。只需在if条件下添加全局变量

animating

==false..不，这不是我需要的。我需要在click函数中使用一条语句，这样当单击按钮时，hideOnScroll函数