Показать сообщение отдельно
  #1 (permalink)  
Старый 30.07.2017, 23:53
Новичок на форуме
Отправить личное сообщение для nklf-367 Посмотреть профиль Найти все сообщения от nklf-367
 
Регистрация: 12.06.2016
Сообщений: 7

clearInterval и приключения области видимости
Привет!

Есть у меня такой рабочий код, который, при клике на элемент меню сдвигает весь список влево\вправо так, чтобы "кликнутый" элемент оказался по центру блока.

var b=0;
var a=document.getElementsByClassName('slide');
var ul=document.getElementsByClassName('dd');
var z=document.getElementsByClassName('wrapper');
var halfBlock = (960/2) ;
var coord;
var ppx;
var computedStyle;
var currentLeft;


for(var i=0 ;i<a.length; i++) {
    b = a[i].offsetWidth + b;
}
ul[0].style.width = b + "px";

for(var i=0; i<a.length; i++) {
    (function() {
	var j = i;
	a[i].onclick = function() {
	    coord = a[j].getBoundingClientRect();
            if(coord.left < halfBlock) {
		var  timerLeft = setInterval( function(){
		    coord = a[j].getBoundingClientRect();
		    ul[0].style.left = 4 + ppx + "px";
		    computedStyle = getComputedStyle(ul[0]);
		    currentLeft = computedStyle.left;
		    ppx = Number(currentLeft.slice(0, currentLeft.indexOf("px")));
		    if(coord.left >= halfBlock - coord.width / 2 ) {
			
			clearInterval(timerLeft);
			
		    }
		},4)
	    } else {
		var  timerRight = setInterval( function(){
		    coord = a[j].getBoundingClientRect();
		    ul[0].style.left = -4 + ppx + "px";
		    computedStyle = getComputedStyle(ul[0]);
		    currentLeft = computedStyle.left;
		    ppx = Number(currentLeft.slice(0, currentLeft.indexOf("px")));
		    if(coord.left <= halfBlock - coord.width / 2 ) {
			
			clearInterval(timerRight);
		    }
		},4)
		
	    }
	}
    })();
    
    
}


Но если сделать ветвление иначе:
if(coord.left < halftBlock) {
    setInterval(timerLeft)
} else {
   setInterval(timerRight)
}
function timerLeft() {
        //...my code
    }
function timerRight() {
        //...my code
    }

То функции выполняются, но не срабатывает clearInterval. Блок уезжает в бесконечные дали за экраном. Вероятно, clearInterval не получает доступа к функции, которую он должен тормозить.
Ответить с цитированием