延迟jQuery中的点击功能答案

【问题标题】：Delaying a click function in jQuery延迟jQuery中的点击功能
【发布时间】：2019-10-09 19:16:11
【问题描述】：

我有一个点击功能，当点击链接时，会向下滚动到附加的 div。如何在实际向下滚动之前附加大约 5 秒的延迟？

我尝试将 .delay() 添加到函数中，但它似乎不起作用

$(".o-c").click(function() {
  $('html, body').animate({
    scrollTop: $(".one").offset().top
  }, 2000);
});

.left {
  width: 50%;
  float: left;
  background: red;
  height: 100vh;
}

.right {
  width: 50%;
  float: right;
  background: green;
  height: 100vh;
}

.one {
  width: 100%;
  background: yellow;
  height: 100vh;
  display: block;
  clear: both;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="left">


  <ul class="pivot-nav">
    <li class="pivot-nav-item"><a class="o-c default-underline custom-scroll-link" href="#one" data-toggle="my-scrollspy-2">1</a></li>


  </ul>

</div>



<div class="one">
  Some more TEXT HERE
</div>

【问题讨论】：

标签： jquery html css

【解决方案1】：

您可以调用delay() 在fx 队列上运行动画之前添加暂停：

$(".o-c").click(function() {
  $('html, body').delay(5000).animate({
    scrollTop: $(".one").offset().top
  }, 2000);
});

$(".o-c").click(function() {
  $('html, body').delay(5000).animate({
    scrollTop: $(".one").offset().top
  }, 2000);
});

.left {
  width: 50%;
  float: left;
  background: red;
  height: 100vh;
}

.right {
  width: 50%;
  float: right;
  background: green;
  height: 100vh;
}

.one {
  width: 100%;
  background: yellow;
  height: 100vh;
  display: block;
  clear: both;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="left">
  <ul class="pivot-nav">
    <li class="pivot-nav-item"><a class="o-c default-underline custom-scroll-link" href="#one" data-toggle="my-scrollspy-2">1</a></li>
  </ul>
</div>
<div class="one">
  Some more TEXT HERE
</div>

您也可以使用setTimeout():

$(".o-c").click(function() {
  setTimeout(function() {
    $('html, body').animate({
      scrollTop: $(".one").offset().top
    }, 2000);
  }, 5000);
});

【讨论】：

【解决方案2】：

您可以使用setTimeout() 进行延迟。

$(".o-c").click(function() {
  setTimeout(function(){
  $('html, body').animate({
    scrollTop: $(".one").offset().top
  }, 2000);
},2000);})

.left {
  width: 50%;
  float: left;
  background: red;
  height: 100vh;
}

.right {
  width: 50%;
  float: right;
  background: green;
  height: 100vh;
}

.one {
  width: 100%;
  background: yellow;
  height: 100vh;
  display: block;
  clear: both;
}

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<div class="left">
  <ul class="pivot-nav">
    <li class="pivot-nav-item"><a class="o-c default-underline custom-scroll-link" href="#one" data-toggle="my-scrollspy-2">1</a></li>
  </ul>
</div>
<div class="one">
  Some more TEXT HERE
</div>

【讨论】：