Question

我在setInterval函数中设置了一个滚动计数器变量（它计算发生的滚动次数），每次执行setInterval函数（setInterval函数运行20次并停止）时，该变量都会增加1。显示在页面中。但是，即使在所有setInterval函数完成执行之前，该值也会立即达到最大值。

很抱歉，如果解释不正确，希望这段代码能解决我的问题。

$(document).ready(function() {
  var pagePos = 0;
  var point = 0;

  $(".nav-btn").click(function() {
    var intervalid = setInterval(function() {
      pagePos = pagePos + 200;
      $('body,html').animate({
        scrollTop: +pagePos
      }, 500);
      point = point + 1;
      $('.scroll-count').text("Scroll count: " + point);
      if (pagePos >= 4000) {
        clearInterval(intervalid);
        point = 0;
        pagePos = 0;
      }
    }, 50);

  });
});

body {
  margin: 0;
}

.nav-class {
  border: 1px solid transparent;
  background-color: greenyellow;
  border-radius: 3px;
  height: 50px;
  padding: 20px;
  text-align: center;
}

.nav-btn {
  background-color: bisque;
  border: none;
  cursor: pointer;
  width: 5em;
  height: 2em;
  border-radius: 3px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.nav-btn:hover {
  border: 2px solid rgb(76, 0, 255);
}

.inner-div-class {
  border: 1px solid rebeccapurple;
  height: 300px;
}

.div-class>div:nth-child(odd) {
  background-color: violet;
}

.div-class>div:nth-child(even) {
  background-color: palegreen;
}

.scroll-count {
  position: fixed;
  top: 85%;
  left: 1em;
  color: white;
  font-size: 2em;
  text-shadow: 2.5px 1.5px 0px #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Jquery auto scroll</title>
</head>


<body>
  <nav class="nav-class">
    <button class="nav-btn"> Click </button><span style="font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif"> to start scrolling</span>
  </nav>
  <div class="div-class">
    <div class="inner-div-class"></div>
    <div class="inner-div-class"></div>
    <div class="inner-div-class"></div>
    <div class="inner-div-class"></div>
    <div class="inner-div-class"></div>
    <div class="inner-div-class"></div>
    <div class="inner-div-class"></div>
    <div class="inner-div-class"></div>
    <div class="inner-div-class"></div>
    <div class="inner-div-class"></div>
    <div class="inner-div-class"></div>
    <div class="inner-div-class"></div>
    <div class="inner-div-class"></div>
    <div class="inner-div-class"></div>
    <div class="inner-div-class"></div>
    <div class="inner-div-class"></div>
    <div class="inner-div-class"></div>
    <div class="inner-div-class"></div>
  </div>
  <div class="scroll-count">
    Scroll count:
  </div>
</body>

</html>

Answer 1

$(document).ready(function() {
  var pagePos = 0;
  var point = 0;

  $(".nav-btn").click(function() {
    var intervalid = setInterval(function() {
      pagePos = pagePos + 200;
      $('body,html').animate({
        scrollTop: +pagePos
      }, 500);
      point = point + 1;
      $('.scroll-count').text("Scroll count: " + point);
      if (pagePos >= 4000) {
        clearInterval(intervalid);
        point = 0;
        pagePos = 0;
      }
    }, 500); <HERE

  });
});

将50个间隔更改为500

setInterval函数内的计数器变量不起作用

1 个答案: