Problems with clearInterval()

**penguins87** · 05-01-2010, 02:31 PM

I don't understand what is wrong with my code here. I am making a slideshow for my website. The only problem is when I pause it and play it again, it speeds up. For some reason, clearInterval() does not seem to be doing its job correctly.

Code:

function playSlideshow() {
 intval = setInterval(next, time);
 document.getElementById('play').style.display = "none";
 document.getElementById('pause').style.display = "block";
}

function pauseSlideshow() {
 clearInterval(intval);
 document.getElementById('play').style.display = "block";
 document.getElementById('pause').style.display = "none";
}

**jscheuer1** · 05-01-2010, 03:10 PM

That might not be enough code to work from. Does the slide show also have a mouseover pause? Are there any other intervals or timeouts involved in the code anywhere?

Anyways, what you have posted looks OK. It would harm nothing, and perhaps might fix things to add another clearInterval:

Code:

function playSlideshow() {
 clearInterval(intval);
 intval = setInterval(next, time);
 document.getElementById('play').style.display = "none";
 document.getElementById('pause').style.display = "block";
}

function pauseSlideshow() {
 clearInterval(intval);
 document.getElementById('play').style.display = "block";
 document.getElementById('pause').style.display = "none";
}

**vwphillips** · 05-01-2010, 03:15 PM

works for me IE and FF

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
/*<![CDATA[*/

var intval=null;

function next() {
document.Show.Show0.value=vic++;
}
function playSlideshow() {
 clearInterval(intval);
 intval = setInterval(next, 500);
 document.getElementById('play').style.display = "none";
 document.getElementById('pause').style.display = "block";
}

function pauseSlideshow() {
 clearInterval(intval);
 document.getElementById('play').style.display = "block";
 document.getElementById('pause').style.display = "none";
}
/*]]>*/
</script></head>

<body>
<input id="play" type="button" name="" value="Play" onclick="playSlideshow();"/>
<input id="pause" type="button" name="" value="Pause" onclick="pauseSlideshow();"/>

<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:visible;top:420px;left:0px;" >
<input size=100 name=Show0 >
<input size=10 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
<input size=10 name=Show7 >
<input size=10 name=Show8 >
<input size=10 name=Show9 ><br>
<textarea name=TA rows=1 cols=100 ></textarea>
</form>
</body>

</html>

Thread: Problems with clearInterval()

Thread Tools

Search Thread

Problems with clearInterval()

Bookmarks

Bookmarks

Posting Permissions