Не останавливается setInterval

[batcave]

Всем привет. Нужно чтобы div остановил свое движение когда его offsetLeft превысит определенное число. Например 180px. Вроде делаю все правильно, а не останавливается. Вот ссылочка, чтобы было понятно к чему код:
http://billyandthecure.esy.es/sand.html
пытаюсь сделать спрайтовую анимацию через сетИнтервал.
Сам код:

var divLink = document.querySelector('.zelda');
var linkOffsetLeft = divLink.offsetLeft;
var movementRightArray = ['0% 70%', '35% 70%', '0% 70%', '100% 70%'];
var i = 0;
var timerId;
divLink.addEventListener('click', move);
		
function move(){
	if( linkOffsetLeft < 180){
 	      timerId = setInterval(moveRight, 300);
	} else { clearInterval(timerId)}
}
function moveRight(){
	 linkOffsetLeft += 5;
	divLink.style.left = linkOffsetLeft + 'px'; 
	divLink.style.backgroundPosition = ''+movementRightArray[i]+'';
	i++;
	if (i > 3) { i = 0};
}

[Mess4me]

batcave,
а так?

var divLink = document.querySelector('.zelda');
    var linkOffsetLeft = divLink.offsetLeft;
    var movementRightArray = ['0% 70%', '35% 70%', '0% 70%', '100% 70%'];
    var i = 0;
    var timerId;
    divLink.addEventListener('click', move);

    function move(){
        if( linkOffsetLeft < 180){
            timerId = setInterval(function () {moveRight()}

            , 300);
        } else { clearInterval(timerId)}
    }
    function moveRight(){
        linkOffsetLeft += 5;
        divLink.style.left = linkOffsetLeft + 'px';
        divLink.style.backgroundPosition = ''+movementRightArray[i]+'';
        i++;
        if (i > 3) { i = 0};
    }

[batcave]

а так?

Не останавливается.

[Mess4me]

batcave,
а останавливаться должен по клику или когда превышен linkOffsetLeft ?
Вы условие немного не так задали .
1. Произошел клик

 divLink.addEventListener('click', move);

2. Запустилась функция

function move()

3. Проверила условие

if( linkOffsetLeft < 180){

4. Так как удовлетворяет запустила SetInterval , которая запускает функцию moveRight

timerId = setInterval(function () {moveRight()}

5. Больше к проверке не возвращается

if( linkOffsetLeft < 180){

[batcave]

Ааа спасибо большое! Я кажется понял. Сейчас перепишу. Остановка по превышению, да.

[рони]

batcave,
зачем условие там где оно никогда не сработает?

[Mess4me]

batcave,
может так?

var divLink = document.querySelector('.zelda');
    var linkOffsetLeft = divLink.offsetLeft;
    var movementRightArray = ['0% 70%', '35% 70%', '0% 70%', '100% 70%'];
    var i = 0;
    var timerId;
    divLink.addEventListener('click', move);

    function move() {

            timerId = setInterval(function () {
                if (linkOffsetLeft < 180) {
                    moveRight()
                } else {

                    clearInterval(timerId)
                }
            }, 300);

        
    }
    function moveRight(){
        linkOffsetLeft += 5;
        divLink.style.left = linkOffsetLeft + 'px';
        divLink.style.backgroundPosition = ''+movementRightArray[i]+'';
        i++;
        if (i > 3) { i = 0};
    }

[batcave]

Я ваш должник, спасибо огромное)

[рони]

batcave,

var divLink = document.querySelector('.zelda');
		var linkOffsetLeft = divLink.offsetLeft;
		var movementRightArray = ['0% 70%', '35% 70%', '0% 70%', '100% 70%'];
		var i = 0;
		var timerId
		divLink.addEventListener('click', move);

		function move(){
                clearInterval(timerId);
			 	timerId = setInterval(moveRight, 300);

		 }
		function moveRight(){
		 	linkOffsetLeft += 5;
            if( linkOffsetLeft > 180){ clearInterval(timerId); return} ;
			divLink.style.left = linkOffsetLeft + 'px';
			divLink.style.backgroundPosition = ''+movementRightArray[i]+'';
			i++;
			if (i > 3) { i = 0};
		}

[Mess4me]

batcave,
игра старенький King's Bounty напоминает по графике )