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

  • Автор темы interrupter
  • Дата начала
Статус
Закрыто для дальнейших ответов.
I

interrupter

#1
Код:
 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);
}
}
Есть вот такая функция. Суть её сводиться к тому чтобы плавно убрать левый столбец таблицы влево и расширить середину. Но она не работает так как надо, она ждёт секунду, а потом резко убирается.
 
I

interrupter

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

sir Aurum

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

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

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

interrupter

#4
Работает все равно не так как надо - убирается слишком быстро.
Попробовал такой вариант.
Код:
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);
}
 
I

interrupter

#6
С этим 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);
}
 
S

sir Aurum

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

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

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 по-русски можно почитать здесь: http://www.rsdn.ru/article/inet/jQuery.xml
удобный референс: http://visualjquery.com/1.1.2.html
 
Статус
Закрыто для дальнейших ответов.