大佬教程收集整理的这篇文章主要介绍了使用onclick clearInterval()，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
请帮助我在使用 setInterval() 函数时突然使用 clearInterval()，一切正常。
但是具有类的自动工作 li 元素会自动停止工作。
任何人都有任何解决方案或想法如何修复此错误，在使用上一个和下一个按钮后如何再次运行 setInterval()
任何形式的帮助都是 高度赞赏
http://jsfiddle.net/pikitemplates/9nu5x3z4/
这是代码
$(document).ready(function () {
$('.mydivs div:first').addClass('active');
var intervalID = setInterval(function() {
// Remove .active class from the active li,select next li sibling.
divs.eq(Now).removeClass('active');
Now = (Now + 1 < divs.length) ? Now + 1 : 0;
divs.eq(Now).addClass('active');
},2000);
var divs = $('.mydivs>div');
var Now = 0; // currently shown div
$("#next").click(function (e) {
clearInterval(intervalID);
divs.eq(Now).removeClass('active');
Now = (Now + 1 < divs.length) ? Now + 1 : 0;
divs.eq(Now).addClass('active');
});
$("#prev").click(function (e) {
clearInterval(intervalID);
divs.eq(Now).removeClass('active');
Now = (Now > 0) ? Now - 1 : divs.length - 1;
divs.eq(Now).addClass('active');
});
});.mydivs {
border:5px solID #ccf;
}
.active{color:red}<script src="https://cdnjs.cloudflare.com/AJAX/libs/jquery/2.2.3/jquery.min.Js"></script>
<div class="mydivs">
<div>div 1</div>
<div>div 2</div>
<div>div 3</div>
<div>div 4</div>
</div>
<div class="mydivs-bt">
<div ID="prev">prev</div>
<div ID="next">next</div>
</div>
它可能会停止工作，因为您没有在 prev/next 点击取消后重新启动 setInterval。
var intervalId;
function startInterval() {
intervalId = setInterval(function() {
divs.eq(now).removeClass('active');
now = (now + 1 < divs.length) ? now + 1 : 0;
divs.eq(now).addClass('active');
},2000);
}
startInterval();
var divs = $('.mydivs>div');
var now = 0; // currently shown div
$("#next").click(function (e) {
clearInterval(intervalId);
divs.eq(now).removeClass('active');
now = (now + 1 < divs.length) ? now + 1 : 0;
divs.eq(now).addClass('active');
startInterval();
});
$("#prev").click(function (e) {
clearInterval(intervalId);
divs.eq(now).removeClass('active');
now = (now > 0) ? now - 1 : divs.length - 1;
divs.eq(now).addClass('active');
startInterval();
});.mydivs {
border:5px solid #ccf;
}
.active{color:red}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mydivs">
<div>div 1</div>
<div>div 2</div>
<div>div 3</div>
<div>div 4</div>
</div>
<div class="mydivs-bt">
<div id="prev">prev</div>
<div id="next">next</div>
</div>,
您没有重新开始您的间隔。从上一个/下一个导航后，请确保使用新的间隔重新分配 intervalId。
我还冒昧地简化了您的一些逻辑。有很多冗余代码。希望此代码能帮助您理解。
编辑：我加入了一些 Flexbox 来改进 CSS。
var now = 0; // currently shown div
var intervalId;
var $divs = $('.mydivs > div');
function stop() {
if (intervalId != null) {
clearInterval(intervalId);
intervalId = null;
}
}
function start() {
intervalId = setInterval(function() {
advance(1);
},2000);
}
function restart() {
stop();
start();
}
function addMod(x,n,m) {
return (x + n + m) % m;
}
// Remove .active class from the active li,select next li sibling.
function advance(dir) {
$divs.eq(now).removeClass('active');
now = addMod(now,dir,$divs.length);
$divs.eq(now).addClass('active');
}
$(document).ready(function() {
$divs.first().addClass('active');
start();
$("#next").click(function(e) {
stop();
advance(1);
start();
});
$("#prev").click(function(e) {
stop();
advance(-1);
start();
});
});html,body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
background: #222;
color: #EEE;
}
body {
display: flex;
flex-direction: column;
}
.mydivs {
display: flex;
flex-direction: row;
flex: 1;
align-items: center;
justify-content: center;
padding: 0.25em;
}
.mydivs > div {
text-align: center;
border: thin solid #666;
flex: 1;
margin: 0.25em;
height: 3em;
line-height: 3em;
font-family: monospace;
}
.mydivs > div.active {
color: #F00;
border: thin dashed #F00;
}
.mydivs-bt {
display: flex;
flex-direction: row;
margin: 0.25em;
}
.mydivs-bt > div {
flex: 1;
text-align: center;
margin: 0.5em;
padding: 0.5em;
cursor: pointer;
border: thin solid #666;
background: #444;
}
.mydivs-bt > div:hover {
background: #666;
border-color: thin solid #888;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<div class="mydivs">
<div>DIV #1</div>
<div>DIV #2</div>
<div>DIV #3</div>
<div>DIV #4</div>
</div>
<div class="mydivs-bt">
<div id="prev">Prev</div>
<div id="next">Next</div>
</div>以上是大佬教程为你收集整理的使用onclick clearInterval()全部内容，希望文章能够帮你解决使用onclick clearInterval()所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。