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

Добрый день!

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

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);
	}
}

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