Проблема с вызовом функции через промежуток времени

[interrupter]

 function resize()
{
document.getElementById("leftTop").width = document.getElementById("leftTop").width-1;
document.getElementById("leftMiddle").width = document.getElementById("leftMiddle").width-1;
document.getElementById("leftBottom").width = document.getElementById("leftBottom").width-1;	
document.getElementById("rightTop").width = 100;
document.getElementById("rightMiddle").width = 100;
document.getElementById("rightBottom").width = 100;	
document.getElementById("middleTop").width = document.getElementById("middleTop").width+1;
document.getElementById("middleMiddle").width = document.getElementById("middleMiddle").width+1;
document.getElementById("middleBottom").width = document.getElementById("middleBottom").width+1;
document.getElementById("mainTable").width = 1000;
}

function resizeLeft()
{
for (var i=1; i<100; i++){
setInterval('resize()', 10);
}
}

Есть вот такая функция. Суть её сводиться к тому чтобы плавно убрать левый столбец таблицы влево и расширить середину. Но она не работает так как надо, она ждёт секунду, а потом резко убирается.

 

[interrupter]

Цикл нужен чтобы выполнить процедуру только 100 раз, и чтобы каждый раз размер менялся на фиксированный интервал

 

[sir Aurum]

Вы перепутали setTimeout и setInterval

Попробуйте вместо setInterval('resize()', 10);
использовать setTimeout('resize()', 10*i)

в таком случает и таймер очищать не обязательно

 

[interrupter]

Работает все равно не так как надо - убирается слишком быстро.
Попробовал такой вариант.

var endWidth=0;
var interval;
function resize()
{
document.getElementById("leftTop").width = document.getElementById("leftTop").width-1;
document.getElementById("leftMiddle").width = document.getElementById("leftMiddle").width-1;
document.getElementById("leftBottom").width = document.getElementById("leftBottom").width-1;	
document.getElementById("rightTop").width = 100;
document.getElementById("rightMiddle").width = 100;
document.getElementById("rightBottom").width = 100;	
document.getElementById("middleTop").width = document.getElementById("middleTop").width+1;
document.getElementById("middleMiddle").width = document.getElementById("middleMiddle").width+1;
document.getElementById("middleBottom").width = document.getElementById("middleBottom").width+1;
document.getElementById("mainTable").width = 1000;
if (document.getElementById("middleTop").width == endWidth) clearInterval(interval);
}

function resizeLeft()
{
interval = setInterval('resize()', 10);
}

Все равно не работает, ко всему прочему при увеличении интервала видно что граница сначала резко прыгает в право, а лишь затем рывками влево.
А по позже я попробовал вот такой вариант он работает практически идеально, но скорость работы практически не регулирутся получается весьма тормознуто.

var endWidth=0;
var interval;
function resize()
{
var nextLeftWidth = parseInt(document.getElementById("leftTop").width) - 1;
document.getElementById("leftTop").width = nextLeftWidth + " px";
document.getElementById("leftMiddle").width = nextLeftWidth + " px";
document.getElementById("leftBottom").width = nextLeftWidth + " px";	
document.getElementById("rightTop").width = 100 + " px";
document.getElementById("rightMiddle").width = 100 + " px";
document.getElementById("rightBottom").width = 100 + " px";
var nextMiddleWidth = parseInt(document.getElementById("middleTop").width) + 1;
document.getElementById("middleTop").width = nextMiddleWidth + " px";
document.getElementById("middleMiddle").width = nextMiddleWidth + " px";
document.getElementById("middleBottom").width = nextMiddleWidth + " px";
document.getElementById("mainTable").width = 1000 + " px";
if (document.getElementById("middleTop").width == endWidth) clearInterval(interval);
}

function resizeLeft()
{
interval = setInterval('resize()', 2);
}

 

[interrupter]

Для: interrupter
а интервал менять пробовали?
и в setInterval и в setTimeout время задается в милисекундах т.е. 1 сек = 1000 мсек

пробовал

 

[interrupter]

С этим clearInterval проблема выходит, он то ли не работает, то ли условие его включения не срабатывает.

 var count = 0;

function resizeFirstStep()
{
var nextFirstStepWidth = parseInt(document.getElementById("FirstStepMenuItem").width) + 5;
var nextRegistrationWidth = parseInt(document.getElementById("RegistrationMenuItem").width) - 3;
var nextAboutWidth = parseInt(document.getElementById("AboutMenuItem").width) - 2;

if (nextFirstStepWidth < FirstStepMaxWidth){ document.getElementById("FirstStepMenuItem").width = nextFirstStepWidth + " px";}

if (nextRegistrationWidth > RegistrationMinWidth){ document.getElementById("RegistrationMenuItem").width = nextRegistrationWidth + " px";}

if (nextAboutWidth > AboutMinWidth) {document.getElementById("AboutMenuItem").width = nextAboutWidth + " px";	}

if (count > 100) {
clearInterval(intervalFirstStep);
alert("Clear Interval");
}
count++;	
}


function sizeFirstStep()
{
count = 0;
intervalFirstStep = setInterval('resizeFirstStep()', 5);
}

 

[sir Aurum]

Если не получается, воспользуйтесь классным фреймворком jquery

Ссылка скрыта от гостей

Весь код поместится в несколько строчек, что-то типа:

var width1 = $("#nextFirstStepWidth").width();
var width2 = $("#RegistrationMenuItem").width();
var width3 = $("#nextAboutWidth").width();

$("#nextFirstStepWidth").animate({width: width1+500}, 400);
$("#RegistrationMenuItem").animate({width: width2-300}, 400);
$("#nextAboutWidth").animate({width: width3-200}, 400);

про jquery по-русски можно почитать здесь:

Ссылка скрыта от гостей

удобный референс:

Ссылка скрыта от гостей