setInterval函数内的计数器变量不起作用
[英]counter variable inside a setInterval function doesn't work
问题描述
I have set one scroll-counter variable(it counts the number of scroll occured) inside the setInterval function which increases by 1 every-time the setInterval function is executed(the setInterval function runs 20 times and stops) and its value is displayed in the page. 
我在setInterval函数中设置了一个滚动计数器变量（它计算了滚动的数量），每次执行setInterval函数时它会增加1（setInterval函数运行20次并停止），其值显示在页。 But the value immediately gets to maximum even before all the setInterval functions are completed executing. 但是，即使在所有setInterval函数执行完毕之前，该值也会立即达到最大值。
I am sorry if it's a bad explanation, hope this code clears my question. 如果这是一个糟糕的解释，我很抱歉，希望这段代码能够解决我的问题。
$(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>
1 个解决方案
解决方案1
0 已采纳 2019-04-19 17:11:46
$(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
});
});
Change the 50 interval to 500 将50间隔更改为500
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Ajax，为什么setInterval函数不起作用？ - Ajax, why the setInterval function doesn't work?
在函数中使用setInterval时不起作用 - setInterval doesn't work when used in a function
onload ='setInterval（“ function（）”，1000）'不起作用 - onload='setInterval(“function()”,1000)' doesn't work
设置间隔不起作用？ - setInterval doesn't work?
if语句不适用于计数器变量 - if statement doesn't work for counter variable
在另一个函数中使用函数不起作用：未定义变量 - Using a function inside another function doesn't work: variable is not defined
javascript在while循环中使用setInterval不起作用 - javascript Using setInterval inside a while loop doesn't work
iPhone上滚动事件中的SetInterval-为什么此代码不起作用？ - SetInterval inside scrolling events on iPhone - Why this code doesn't work?
Javascript setInterval inside object constructor doesn't work as expected - Javascript setInterval inside object constructor doesn't work as expected
变量在JQuery滚动功能内不起作用 - Variable doesn't work inside JQuery scroll function
相关标签