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

正如您所看到的，当您单击“向下”时，它会立即转到 div 指向链接。然而，当点击“Go Right”和“Go 左”有一个延迟，我不确定它来自哪里。

您首先在此元素上调用 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>

Answer 2

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

$(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>