[plug-ugly]

Доброго времени суток!
Я первый раз на этом форуме и хочу попросить помочь советом/литературой, пожалуйста. В js новичок, не судите строго.
clearIntervar всегда срабатывает сразу же после его написания? Я хочу, чтобы заголовок останавливался по клику => в первой ф-ции заголовок движется (код рабочий), а во второй ф-ции прописываю условие "если кликаю по заголовку, то clearIntervar".
Подскажите на что обратить внимание!

let count = 0;
let direction = "right";
$("#heading").offset({left: count, top: count});

function moveHeading ()
{
	if (direction === "right") {
		$("#heading").offset({left: count});
		count++;
		
		if (count > 100) {
			count = 0;
			direction = "down";
		}
	}
	
	 else if (direction === "down") {
		$("#heading").offset({top: count});
		count++;
		
		if (count > 100) {
			count = 100;
			direction = "left";
		}
	}
	
	else if (direction === "left") {
		$("#heading").offset({left: count});
		count--;
		
		if (count < 0) {
			count = 100;
			direction = "top";
		}
	}
	
	else if (direction === "top") {
		$("#heading").offset({top: count});
		count--;
		
		if (count < 0) {
			count = 0;
			direction = "right";
		}
	}
	
}

function stop () {
	if ($("#heading").click(moveHeading)) {
		clearInterval(idHeading);
	}
}

let idHeading =  setInterval(moveHeading, 30);
stop();