延迟后运行的JS函数

Question

我有两个功能。我想将它们组合起来，这样当您从左向右（或反之亦然）移动时，它不会有延迟（就像向下滚动功能那样）。

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});


$(function(){
    $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
            if ($target.length) {
                var targetOffset = $target.offset().left;
                $('html,body').animate({scrollLeft: targetOffset}, 1000);
                return false;
            }
        }
    });
});

body{
    padding:0;
    margin:0;
    overflow:hidden;
}

#Home{
    position:relative;
 width:100vw;
 height:100vh;
 background-color:#FFF;
}

#SectionLeft{
    position:relative;
 width:100vw;
 height:100vh;
 background-color:#989898;
 float:left;
}

#SectionRight{
    position:relative;
 margin-left:100vw;
 width:100vw;
 height:100vh;
    color:000;
 background-color:#838383;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


<div id="Home">
    <a href="#SectionLeft">Go Down</a>
</div>
         
<div id="SectionLeft">
     <a href="#SectionRight">Go Right</a>   
</div>

<div id="SectionRight">
     <a href="#SectionLeft">Go Left</a>   
</div>

Answer 1

尝试调整选择器，首先将 #SectionRight a、#SectionLeft a 添加到 :not() .animate()；在第二个 .animate()

使用 '#SectionLeft a, #SectionRight a'

$(function() {
  $('a[href*=#]:not([href=#], #SectionLeft a, #SectionRight a)').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});


$(function(){
    $('#SectionLeft a, #SectionRight a').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
            if ($target.length) {
                var targetOffset = $target.offset().left;
                $('html,body').animate({scrollLeft: targetOffset}, 1000);
                return false;
            }
        }
    });
});

body{
    padding:0;
    margin:0;
    overflow:hidden;
}

#Home{
    position:relative;
 width:100vw;
 height:100vh;
 background-color:#FFF;
}

#SectionLeft{
    position:relative;
 width:100vw;
 height:100vh;
 background-color:#989898;
 float:left;
}

#SectionRight{
    position:relative;
 margin-left:100vw;
 width:100vw;
 height:100vh;
    color:000;
 background-color:#838383;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


<div id="Home">
    <a href="#SectionLeft">Go Down</a>
</div>
         
<div id="SectionLeft">
     <a href="#SectionRight">Go Right</a>   
</div>

<div id="SectionRight">
     <a href="#SectionLeft">Go Left</a>   
</div>

Answer 2

As you can see when you click "Go down" it immediately goes to the div directed in the link. However, when clicking on "Go Right" and "Go Left" there is a delay that I am not sure from where it is coming.

您首先在此元素上调用 scroll top，即使它滚动到相同的值（意味着垂直滚动到 0）也需要一秒钟才能完成。 animate() 方法使用 fx 队列，因此所有动画都放入队列，运行一次只有一个。

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top,
          scrollLeft: target.offset().left
        }, 1000);
        return false;
      }
    }
  });
});

body{
    padding:0;
    margin:0;
    overflow:hidden;
}

#Home{
    position:relative;
 width:100vw;
 height:100vh;
 background-color:#FFF;
}

#SectionLeft{
    position:relative;
 width:100vw;
 height:100vh;
 background-color:#989898;
 float:left;
}

#SectionRight{
    position:relative;
 margin-left:100vw;
 width:100vw;
 height:100vh;
    color:000;
 background-color:#838383;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


<div id="Home">
    <a href="#SectionLeft">Go Down</a>
</div>
         
<div id="SectionLeft">
     <a href="#SectionRight">Go Right</a>   
</div>

<div id="SectionRight">
     <a href="#SectionLeft">Go Left</a>   
</div>

延迟后运行的JS函数

JS function that is running after a delay

javascript

jquery

smooth-scrolling

jquery-animate