Помощь - Поиск - Пользователи - Календарь
Полная версия этой страницы: Проблема с вызовом функции через промежуток времени
Форум программистов > Интернет и сети > Web-программирование > HTML, CSS, XML, JavaScript
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);
    }
}

Есть вот такая функция. Суть её сводиться к тому чтобы плавно убрать левый столбец таблицы влево и расширить середину. Но она не работает так как надо, она ждёт секунду, а потом резко убирается.
sax_ol
Для: interrupter
а зачем тут цикл?
interrupter
Цикл нужен чтобы выполнить процедуру только 100 раз, и чтобы каждый раз размер менялся на фиксированный интервал
sax_ol
Для: interrupter
тогда какой сммысл в setInterval? ну и по циклу ...

т.е. если посмотреть в справку ]]>http://msdn2.microsoft.com/en-us/library/ms536749.aspx]]>
то видно, что эта функция сама будет вызывать resize() через интервалы, что уже организовывает цикл. и работает до тех пор пока ее не тормознуть - clearInterval

вы это понимаете?
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);
}
sax_ol
Для: interrupter
а интервал менять пробовали?
и в setInterval и в setTimeout время задается в милисекундах т.е. 1 сек = 1000 мсек
interrupter
Цитата(sax_ol @ 3:08:2007, 17:53 ) *
Для: interrupter
а интервал менять пробовали?
и в setInterval и в setTimeout время задается в милисекундах т.е. 1 сек = 1000 мсек

пробовал
sax_ol
Для: interrupter
ну так сложно понять, не видя, что не работает так как надо

могу сказать что некоторые (а может и все, я не в курсе) скриптовые таймеры работают именно на setInterval, и все класно получается
посмотрите вот тут ]]>http://asp.net/AJAX/Control-Toolkit/Live/A.../Accordion.aspx]]>
тут именно так и работает
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 ]]>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]]>
Для просмотра полной версии этой страницы, пожалуйста, пройдите по ссылке.
Форум IP.Board © 2001-2009 IPS, Inc.