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

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем interrupter, 3 авг 2007.

Статус темы:
Закрыта.
  1. interrupter

    interrupter Гость

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

    interrupter Гость

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

    sir Aurum Гость

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

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

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

    interrupter Гость

    Работает все равно не так как надо - убирается слишком быстро.
    Попробовал такой вариант.
    Код (Text):
    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);
    }
    Все равно не работает, ко всему прочему при увеличении интервала видно что граница сначала резко прыгает в право, а лишь затем рывками влево.
    А по позже я попробовал вот такой вариант он работает практически идеально, но скорость работы практически не регулирутся получается весьма тормознуто.
    Код (Text):
    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);
    }
     
  5. interrupter

    interrupter Гость

    пробовал
     
  6. interrupter

    interrupter Гость

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

    Код (Text):
     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);
    }
     
  7. sir Aurum

    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
     
Загрузка...
Похожие Темы - Проблема вызовом функции
  1. JohnLemon
    Ответов:
    1
    Просмотров:
    828
  2. c0de3r
    Ответов:
    5
    Просмотров:
    113
  3. DobermannTT
    Ответов:
    10
    Просмотров:
    132
  4. SoulPaladin
    Ответов:
    3
    Просмотров:
    120
  5. Artael
    Ответов:
    1
    Просмотров:
    109
Статус темы:
Закрыта.

Поделиться этой страницей