javascript - 延迟后运行的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

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>