使用 onclick clearInterval() 后 setInterval() 不起作用

Question

Please help me when I am using the setInterval () function then suddenly while using clearInterval (), everything works fine.

But Automatic working li elements with class automatically stopped working.

anybody have any solution or idea how to fix this error, after using the previous and next button how to run setInterval() again

Any kind of help is Highly appreciated

http://jsfiddle.net/pikitemplates/9nu5x3z4/

here is code

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

Answer 1

It probably stops working because you are not restarting setInterval after canceling it on prev / next click.

 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>

Answer 2

You are not restarting your interval. Make sure to reassign intervalId with a new interval after navigating from prev/next.

I also took the liberty of simplifying some of your logic. There was a lot of redundant code. Hopefully this code will assist you in understanding.

Edit: I threw in some Flexbox to improve the 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>