Привет!
Есть у меня такой рабочий код, который, при клике на элемент меню сдвигает весь список влево\вправо так, чтобы "кликнутый" элемент оказался по центру блока.
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 не получает доступа к функции, которую он должен тормозить.