setInterval() clearInterval(): Getting frustrated.

[Who8MyFish]

So i'm trying to make a play/pause toggle button for a slideshow gallery I'm making right. When turned on the slideshow should perfoerm the function goForward() every 5000ms. I can successfully start the interval but when trying to clear it all it seems to do is start the interval again and create a new set of intervals so my images start scrolling twice as fast.

 

LINKSAUS: http://www.lojiki.com/slider/

 

$("#play-pause-button").click(function(){
if(timer == null){
	var timer = setInterval(goForward, 5000);
	$("#play-pause-button").html("<img src='http://www.rogercpareview.com/media/images/layout/play-iconB2_small.png'>").load(function(){
		$("#play-pause-button").val("on");
	});
return false;
};
if(timer != null){
	clearInterval(goForward);
	var timer = null;
	$("#play-pause-button").html("<img src='http://www.spalook.com/resources/assets/product/player_pause_button.jpg'>").load(function(){
		$("#play-pause-button").val("off");
	});
};	
});

[requinix]

clearInterval() needs the timer to stop it, not the code to execute. Including a couple other fixes,

$("#play-pause-button").click(function(){
var timer = null;
if(timer == null){
	timer = setInterval(goForward, 5000);
	$("#play-pause-button").html("").load(function(){
		$("#play-pause-button").val("on");
	});
} else {
	clearInterval(timer);
	timer = null;
	$("#play-pause-button").html("").load(function(){
		$("#play-pause-button").val("off");
	});
}
return false;
});

[Who8MyFish]

one shotted my problem like a total baws! Thanks man I've literally been at this one bug for 3 hours non stop.

[requinix]

Really? Because there's actually a problem: timer is always null. Move the var timer outside the click() handler and rename it to something more specific than "timer".