не срабатывает clearInterval

[refrom]

Добрый день!

Написал функцию, которая анимирует картинку типа прогрессбар.

function fancy_load(n) {
	$('#loaderImage').css({display: "block"});
	var i=0;
	function timer() {
	    $('#loaderImage').css({backgroundPosition: "-" + 128*i + "px 0px"});
	    i++; 	
	}
	var intervalID = setInterval(timer, 30); 

	if (n == 'f'){
	    intervalID = clearInterval(intervalID);
	} 
}

Обращаюсь к ней 2 раза. Первый при нажатии на кнопку, второй после загрузки необходимой информацией уже с переменной, при наличии которой должна сработать clearInterval

$(".add_goods_button, .edit_good").click(function(){
		fancy_load();
		$.post("functions_orders.php", {
			action:"add_goods" 
		}, 
		function(data) {

			$("#div_goods_right").html(data);
			$(".lable_art_off").click(function(){
				var art = $(this).attr("id");
				newGoods(art);
		});
			fancy_load("f");
		});
		
	});

clearInterval не срабатывает. Потом посмотрел, что intervalID меняется при повторном обращении. дописал "костыль" что бы он не менялся (присвоил ему постоянный номер). Все равно не срабатывает.

Подскажите как правильно поправить код, что бы при повторном обращении к функции с переменной n = 'f' срабатывала clearInterval.

[рони]

refrom,

intervalID обьявите вне функции

[рони]

refrom,

var intervalID;
function fancy_load(n) {
	$('#loaderImage').css({display: "block"});
	var i=0;
	function timer() {
	    $('#loaderImage').css({backgroundPosition: "-" + 128*i + "px 0px"});
	    i++;
	}
	if (n == 'f'){
	    clearInterval(intervalID);
	}
    else intervalID = setInterval(timer, 30);
}

[рони]

refrom,
а лучше так

var intervalID;
function fancy_load(n) {
        clearInterval(intervalID);
	$('#loaderImage').css({display: "block"});
	var i=0;
	function timer() {
	    $('#loaderImage').css({backgroundPosition: "-" + 128*i + "px 0px"});
	    i++;
	}
    	if (n != 'f'){
    intervalID = setInterval(timer, 30);
	}
}

[refrom]

Спасибо большое. Действительно сработало