• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

267
Views
jQuery ClearInterval not working when multiple setInterval clicked

Here is a simple jQuery Slider, and I am going to start it by clicking on Play Button throught setting up interval = setInterval(updateDiv,1000); Interval to change slides in every 1 second, and i am clearing Interval (Pause Slider) by clearInterval(interval); through Pause Button.

But the problem is I am facing that if user clicked multiple time on play button then slider animation goes crazy in changing slides and after that also clearInterval(interval); function not working. Why ?

Can i know the solution.

MY WHOLE CODE IS:

var interval;
var interval = false;
$("#slideshow > div:gt(0)").hide();

function updateDiv() {
  $('#slideshow > div:first')
    .fadeOut(600)
    .next()
    .fadeIn(400)
    .end()
    .appendTo('#slideshow');
}
$(".play").click(function() {
  interval = setInterval(updateDiv, 1000);
});
$(".pause").click(function() {
  clearInterval(interval);
});
#slideshow {
  margin: 80px auto;
  position: relative;
  width: 240px;
  height: 240px;
  padding: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}

#slideshow>div {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
}

#slideshow2 {
  margin: 80px auto;
  position: relative;
  width: 240px;
  height: 240px;
  padding: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  margin-left: 200px;
}

#slideshow2>div {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
}
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
------
<button class="play">play</button>
<button class="pause">pause</button> -------

<div id="slideshow">
  <div>
    <img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
  </div>
  <div>
    <img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
  </div>
  <div>
    Pretty cool eh? This slide is proof the content can be anything.
  </div>
</div>

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Every time the user clicks on ".play" another setInterval is created, and the interval variable only contains the last one. So, if there's already an interval going on you need either to clear it or to prevent the user to start again.

This is a working solution:

var interval;
var interval = false;
$("#slideshow > div:gt(0)").hide();

function updateDiv() {
  $('#slideshow > div:first')
    .fadeOut(600)
    .next()
    .fadeIn(400)
    .end()
    .appendTo('#slideshow');
}
$(".play").click(function() {
  if(!interval){
    interval = setInterval(updateDiv, 1000);
  }
 
});
$(".pause").click(function() {
  clearInterval(interval);
  interval = false;
});
#slideshow {
  margin: 80px auto;
  position: relative;
  width: 240px;
  height: 240px;
  padding: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}

#slideshow>div {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
}

#slideshow2 {
  margin: 80px auto;
  position: relative;
  width: 240px;
  height: 240px;
  padding: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  margin-left: 200px;
}

#slideshow2>div {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
}
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
------
<button class="play">play</button>
<button class="pause">pause</button> -------

<div id="slideshow">
  <div>
    <img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
  </div>
  <div>
    <img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
  </div>
  <div>
    Pretty cool eh? This slide is proof the content can be anything.
  </div>
</div>

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error