In the following code the clearTimeout() function doesn't seem to clear the timer. Please note: I've stripped the code down a bit to show the relevent parts. Any ideas?
var Gallery =
{
next: function()
{
// does stuff
},
close: function()
{
Gallery.slideshow("off");
},
slideshow: function(sw)
{
if (sw == "off") {clearTimeout(timer);}
var timer = setTimeout(function() {Gallery.next();Gallery.slideshow();}, 1000);
},
};
FULL CODE:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Gallery</title>
<meta name="description" content=" ">
<meta name="author" content=" ">
<link rel="stylesheet" href="scripts/css.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script>
var Gallery =
{
// PARAMETERS FOR CUSTOMISATION
gallery_type: "overlay", // overlay(default), inpage, slideshow
transition_speed: 1000, // milliseconds
outer_opacity: 0.7, // 0 to 1 (option available with overlay)
outer_colour: "#000000", // hex value
image_size: "800px",
show_captions: true, // true, false
overlay_slideshow: true, // true, false (option available with overlay)
slideshow_interval: 5000, // milliseconds
slideshow_controls: false, // true, false
fullscreen: false, // true, false (option available with inpage)
thumbs: [],
images: [],
captions: [],
current_image_id: null,
timer: null,
init: function()
{
// CREATE ARRAYS
var gallery_div = document.getElementById("gallery");
gallery_thumbs = gallery_div.getElementsByTagName("img");
for (var i=0; i < gallery_thumbs.length; i++)
{
Gallery.thumbs[i] = gallery_thumbs[i];
Gallery.thumbs[i].rel = [i];
}
for (var i=0; i < gallery_thumbs.length; i++)
{
Gallery.captions[i] = Gallery.thumbs[i].alt;
}
// CREATE OVERLAYS
var body_tag = document.getElementsByTagName("body");
var outer_overlay = document.createElement("div");
outer_overlay.id = "outer";
outer_overlay.style.backgroundColor = Gallery.outer_colour;
var window_height = $(document).height();
outer_overlay.style.height = window_height +'px';
body_tag[0].appendChild(outer_overlay);
var inner_overlay = document.createElement("div");
inner_overlay.id = "inner";
body_tag[0].appendChild(inner_overlay);
var close_button = document.createElement("img");
close_button.src="images/icon-close.png";
close_button.id = "gallery-close";
inner_overlay.appendChild(close_button);
var next_button = document.createElement("img");
next_button.src="images/icon-next.png";
next_button.id = "gallery-next";
inner_overlay.appendChild(next_button);
var prev_button = document.createElement("img");
prev_button.src="images/icon-prev.png";
prev_button.id = "gallery-prev";
inner_overlay.appendChild(prev_button);
var caption_div = document.createElement("div");
caption_div.id = "gallery-caption";
inner_overlay.appendChild(caption_div);
$("#gallery-caption").fadeTo(0, 0);
if (Gallery.show_captions == true) {
inner_overlay.onmouseover = function() {$("#gallery-caption").stop().fadeTo(Gallery.transition_speed/2, 0.5);};
inner_overlay.onmouseout = function() {$("#gallery-caption").stop().fadeTo(Gallery.transition_speed, 0);};
}
// CREATE IMAGES
for (var i=0; i < Gallery.thumbs.length; i++)
{
var new_image = document.createElement("img");
new_image.src = Gallery.thumbs[i].parentNode.href;
new_image.id= "gallery-img" + (i + 1);
inner_overlay.appendChild(new_image);
Gallery.images[i] = new_image;
$(Gallery.images[i]).fadeTo(0, 0);
}
// EVENT HANDLERS FOR OPEN AND CLOSE
for (var i=0; i < Gallery.thumbs.length; i++)
{
Gallery.thumbs[i].onclick = Gallery.open;
}
var outer_overlay = document.getElementById("outer");
outer_overlay.onclick = Gallery.close;
close_button.onclick = Gallery.close;
next_button.onclick = Gallery.next;
prev_button.onclick = Gallery.previous;
},
open: function()
{
Gallery.current_image_id = this.rel;
var current = Gallery.images[Gallery.current_image_id];
var caption_div = document.getElementById("gallery-caption");
caption_div.innerHTML = Gallery.captions[Gallery.current_image_id];
var inner_overlay = document.getElementById("inner");
inner_overlay.style.height = current.height + "px";
// CENTER BUTTONS & OVERLAY
var next_button = document.getElementById("gallery-next");
next_button.style.top = (current.height / 2) -15 + "px";
var prev_button = document.getElementById("gallery-prev");
prev_button.style.top = (current.height / 2) -15 + "px";
$("#inner").css("top", (($(window).height()-$("#inner").height())/2));
$("#inner").css("left", (($(window).width()-$("#inner").width())/2));
$(current).fadeTo(0, 1);
$("#outer").fadeTo(0, Gallery.outer_opacity);
$("#inner").fadeTo(0, 0);
$("#inner").fadeTo(Gallery.transition_speed, 1);
if (Gallery.overlay_slideshow == true) {
Gallery.slideshow();
}
return false;
},
close: function()
{
if (Gallery.timer) {
clearInterval(Gallery.timer);
Gallery.timer = null;
} else {
$("#outer").fadeTo(0, 0);
$("#inner").fadeTo(0, 0);
$("#outer").css("display", "none");
$("#inner").css("display", "none");
var current = Gallery.images[Gallery.current_image_id];
current.style.display = "none";
}
},
next: function()
{
var next_id = Number(Gallery.current_image_id) + 1;
if (next_id == Gallery.images.length) {next_id = 0;}
var next = Gallery.images[next_id];
var current = Gallery.images[Gallery.current_image_id];
var inner_overlay = document.getElementById("inner");
inner_overlay.style.height = next.height + "px";
// CENTER BUTTONS & OVERLAY
var next_button = document.getElementById("gallery-next");
next_button.style.top = (next.height / 2) -15 + "px";
var prev_button = document.getElementById("gallery-prev");
prev_button.style.top = (next.height / 2) -15 + "px";
$("#inner").css("top", (($(window).height()-$("#inner").height())/2));
$("#inner").css("left", (($(window).width()-$("#inner").width())/2));
var caption_div = document.getElementById("gallery-caption");
caption_div.innerHTML = Gallery.captions[next_id];
$(current).fadeTo(Gallery.transition_speed, 0);
$(next).fadeTo(0, 0);
$(next).fadeTo(Gallery.transition_speed, 1);
Gallery.current_image_id = next_id;
},
previous: function()
{
var prev_id = Number(Gallery.current_image_id) - 1;
if (prev_id == -1) {prev_id = Gallery.images.length -1;}
var prev = Gallery.images[prev_id];
var current = Gallery.images[Gallery.current_image_id];
var inner_overlay = document.getElementById("inner");
inner_overlay.style.height = prev.height + "px";
// CENTER BUTTONS & OVERLAY
var next_button = document.getElementById("gallery-next");
next_button.style.top = (prev.height / 2) -15 + "px";
var prev_button = document.getElementById("gallery-prev");
prev_button.style.top = (prev.height / 2) -15 + "px";
$("#inner").css("top", (($(window).height()-$("#inner").height())/2));
$("#inner").css("left", (($(window).width()-$("#inner").width())/2));
var caption_div = document.getElementById("gallery-caption");
caption_div.innerHTML = Gallery.captions[prev_id];
$(current).fadeTo(Gallery.transition_speed, 0);
$(prev).fadeTo(0, 0);
$(prev).fadeTo(Gallery.transition_speed, 1);
Gallery.current_image_id = prev_id;
},
slideshow: function() {
Gallery.close();
Gallery.timer = setInterval(function() {
Gallery.next();
}, 1000);
},
fullscreen: function()
{
}
};
// START SCRIPTS
Start = function()
{
Gallery.init();
};
window.onload = Start;
</script>
</head>
<body>
<div id="gallery">
<a href="images/argentina-river.jpg"><img src="images/thumbs/argentina-river-thumb.jpg" alt="Argentina River"></a>
<a href="images/monte-bre.jpg"><img src="images/thumbs/monte-bre-thumb.jpg" alt="Monte Bre"></a>
<a href="images/romania.jpg"><img src="images/thumbs/romania-thumb.jpg" alt="Romania"></a>
<a href="images/norway.jpg"><img src="images/thumbs/norway-thumb.jpg" alt="Norway"></a>
<a href="images/cloudy-skies.jpg"><img src="images/thumbs/cloudy-skies-thumb.jpg" alt="Cloudy Skies"></a>
<a href="images/field.jpg"><img src="images/thumbs/field-thumb.jpg" alt="Field"></a>
<a href="images/poland.jpg"><img src="images/thumbs/poland-thumb.jpg" alt="Poland"></a>
<a href="images/coconut-trees.jpg"><img src="images/thumbs/coconut-trees-thumb.jpg" alt="Coconut Trees"></a>
<a href="images/volcanic-land.jpg"><img src="images/thumbs/volcanic-land-thumb.jpg" alt="Volcanic Land"></a>
<a href="images/tokyo-city.jpg"><img src="images/thumbs/tokyo-city-thumb.jpg" alt="Tokyo City"></a>
</div>
</body>
</html>
The clearTimeout is working, but you are immediately re-setting it in the same method. So it starts up again right away. You need to conditionally check for whether to start it:
slideshow: function(sw) {
var timer;
if (sw == "off") {
clearTimeout(timer);
} else {
timer = setTimeout(function() { Gallery.next(); }, 1000);
}
}
The way you structured your code is more complex than it needs to be and has a few bugs. I'd recommend restructuring it like this:
var Gallery = {
timer: null,
next: function() {
/* do stuff */
},
close: function() {
if (Gallery.timer) {
clearInterval(Gallery.timer);
Gallery.timer = null;
}
},
slideshow: function() {
Gallery.close();
Gallery.timer = setInterval(function() {
Gallery.next();
}, 1000);
}
}
You'd start the slideshow with Gallery.slideshow(); and stop it with Gallery.close();
that would be because you are re-setting the timeout after you have cleared it. Rethink the order of your code.
Every time you call the slideshow function, the setTimeout gets executed indipendently of the sw variable being "off" or not.
slideshow: function(sw)
{
if (sw == "off") {
clearTimeout(timer);
} else {
var timer = setTimeout(function() {Gallery.next();Gallery.slideshow();}, 1000);
}
来源：https://stackoverflow.com/questions/7173419/cleartimeout-not-working