Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > setTimeout() с параметром

Автор: Logree 4.9.2010, 16:33

Здравствуйте, тема с похожим название уже http://forum.vingrad.ru/forum/topic-230239.html, но там не то что мне нужно.
Вот захотелось мне чтобы у меня элементики на страничке появлялись плавненько, я скомуниздил такой код:

Код


var t,t2,obj;
function appear(x)
{
    var op = parseFloat(obj.style.opacity);
    
    if(op < x) {
        clearTimeout(t2);
        op += 0.05;
        obj.style.opacity = op;
        t=setTimeout('appear('+x+')',20);
    }
}

function disappear(x) {
    var op = parseFloat(obj.style.opacity);    
    if(op > x) {
        clearTimeout(t);
        op -= 0.05;
        obj.style.opacity = op;
        t2=setTimeout('disappear('+x+')',20);
    }
}

Код


<div  width="200" height="300" style="opacity:0" onMouseOver="javascript:obj=this; appear(1)" onMouseOut="javascript:disappear(0)">Мухахаха</div>

но,
1. переменная x в которой передается конечное\начальное значение прозрачности мне не нужна так эти значения у меня константны 1\0.
2. вместо переменнлой x логичнее передавать в функцию сам объект который нужно менять, да и глобальная переменная obj выглядит как-то коряво.
я переписал код так:

Код


var t,t2;
function appear(obj)
{
    var op = parseFloat(obj.style.opacity);    
    if(op < 1) {
        clearTimeout(t2);
        op += 0.05;
        obj.style.opacity = op;
        t=setTimeout('disappear('+obj+')',20);
    }
}

function disappear(obj) {
    var op = parseFloat(obj.style.opacity);    
    if(op > 0) {
        clearTimeout(t);
        op -= 0.05;
        obj.style.opacity = op;
        t2=setTimeout('disappear('+obj+')',20);
    }
}

Код


<div  width="200" height="300" style="opacity:0" onMouseOver="javascript:appear(this)" onMouseOut="javascript:disappear(this)">Мухахаха</div>

на что ff вот тут

Код


t=setTimeout('disappear('+obj+')',20);

сказал ине

Код


missing ] after element list
[Break on this error] disappear([object HTMLDivElement])

почему он не принимает объект obj как аргумент? ведь x он передавал?!
пробывал через arguments.calle - ошибка другая но результат тотже.
как правильно передать obj?

Автор: Amphiluke 4.9.2010, 16:45

Цитата(Logree @ 4.9.2010, 20:33

)

почему он не принимает объект obj как аргумент?

А вы разве не видите, что прибавляете объект к строке?

Цитата(Logree @ 4.9.2010, 20:33

)

'disappear('+obj+')'

тем самым выполняете неявное преобразование объекта к строковому типу, что и дает строку "[object HTMLDivElement]" вместо самого элемента.

Попробуйте, к примеру, так:

Код


t=setTimeout(function() {disappear(obj);},20);

Добавлено через 1 минуту и 50 секунд
А вообще, чтобы не делать лишний раз рекурсию, есть метод setInterval.

Автор: ayax2005 4.9.2010, 20:59

Честно говоря, вообще непонятно, зачем использовать setTimeout.
Можно просто для всех интересующих элементов вызвать метод $('элементы').fadeIn("slow") по событию $(document).ready, он тоже работает со свойством opacity

Автор: Logree 4.9.2010, 23:28

Amphiluke, вы сами-то пробывали это запустить... не получается так.

Цитата

тем самым выполняете неявное преобразование объекта к строковому типу, что и дает строку "[object HTMLDivElement]" вместо самого элемента.

я вам показал что в предыдущем примере этого не происходит для x.

Как это сделать для setTimeout?

Автор: ksnk 4.9.2010, 23:39

ayax2005, Я где-то читал о людях, которые спят по ночам некоторые люди не пользуются jquery. В силу разных, иногда очень уважительных причин smile

К примеру, для саморазвития.

Цитата(Logree @ 4.9.2010, 16:33

)

Вот захотелось мне чтобы у меня элементики на страничке появлялись плавненько, я скомуниздил такой код:

Не все скомунизженные коды одинаково полезны smile

К примеру для IE смысл свойства style.opacity может оказаться овсем даже не тот. Особенно для IE6.

Цитата(Logree @ 4.9.2010, 23:28

)

вы сами-то пробывали это запустить... не получается так.

как это? Вот так и не заработало?

Код


function disappear(obj) {
    var op = parseFloat(obj.style.opacity);    
    if(op > 0) {
        clearTimeout(t); 
        op -= 0.05;
        obj.style.opacity = Math.max(0,op); // отрицательный опасити. может быть и неплохо, но лучше перебдеть...
        t2= setTimeout(function(){disappear(obj);},20);
    }
}

apear, соответственно, переписать аналогично...

Автор: ayax2005 5.9.2010, 02:10

Уважаемый кисонька, мне кажется многоуважаемый Logree сам решит, пользоватся ли ему моим советом smile

Автор: Logree 5.9.2010, 10:27

Уважаемый, Amphiluke, прошу прощения, действительно ваш пример работает smile

ksnk, я чувствовал что кто нибудь да напишет про jquery.

Цитата

Не все скомунизженные коды одинаково полезны К примеру для IE смысл свойства style.opacity может оказаться овсем даже не тот. Особенно для IE6.

Я вырезал то что должно быть для IE, мне бы так отладить.

Ну раз уж у меня всё так замечательно работает, мне внезапно, да и честно говоря это был изначальный вариант, захотельсь сделать все по-человечески т.е цыклом:

Код


function appear(obj)
{
    var op = parseFloat(obj.style.opacity);
    clearTimeout(t);
    while (op < 1) {        
        op += 0.05;
        obj.style.opacity = op;
        t2 = setTimeout(function() {},20);
        
    }
}

но почему-то в таком случае прозрачность изменяется мгновенно, хотя задержка по идеи быть должна :(
изменение времени задержки не помогает, в чём дело?

По совету Amphiluke, сделал через setInterval() - всё работает

Код


function appear(obj)
{
        clearInterval(t2);
        t = setInterval(function() {    var op = parseFloat(obj.style.opacity);
                        if(op < 1) {
                            op += 0.05;
                            obj.style.opacity = op;
                        } else {
                            clearInterval(t);
                        }                    
                        },20);

}

почему с цыклом не всё так прекрасно ?

Автор: Amphiluke 5.9.2010, 12:32

Цикл, ИМХО тут абсолютно не к месту… smile

Весь смысл использования метода setTimeout в том, чтобы отложить исполнение какого-то кода или вызов callback-функции на заданное время. Цикл же выполняет инструкции в своем теле безотлагательно и настолько быстро, насколько это возможно. Решение с методом setTimeout является рекурсивным, в том смысле, что callback-функция через указанный временной интервал осуществляет вызов самой себя через тот же (или другой) интервал.
А это

Цитата(Logree @ 5.9.2010, 14:27

)

t2 = setTimeout(function() {},20);

непонятно. Зачем порождать кучу таймеров на вызов функции с пустым телом?

Автор: Logree 5.9.2010, 13:10

тогда я чтото не понимаю как работает js, ведь пока не завершится функция которая должна создать задержку, цыкл не может продолжаться, а тут как-то все не так... ну да ладно.

У меня возник вопрос не совсем относящийся к теме:

Код


<div  id="_1" style="opacity:0" onMouseOver="javascript:appear(this)" onMouseOut="javascript:disappear(this)">Мухахаха</div>

то все замечательно работает, если же я выношу стиль в файл:
style.css

Код


#_1 {
opacity:0;
}

Код


<div  id="_1" onMouseOver="javascript:appear(this)" onMouseOut="javascript:disappear(this)">Мухахаха</div>

уже ни чего не происходит! в чём дело?

Автор: Amphiluke 5.9.2010, 14:06

Цитата(Logree @ 5.9.2010, 17:10

)

пока не завершится функция которая должна создать задержку, цыкл не может продолжаться

Вы несколько неправильно понимаете то, как работает схема с функциями обратного вызова (callback). Метод setTimeout возвращает управление сразу как только установит таймер на отложенный вызов callback-функции. Этот таймер тикает в фоне, не препятствуя выполнению кода, следующего за вызовом метода setTimeout. Когда время истечет, callback-функция вызывается по той ссылке, которая была передана методу при его вызове. При этом функция, вызывавшая метод setTimeout уже, возможно, к тому времени отработает полностью.

Добавлено через 11 минут и 19 секунд

Цитата(Logree @ 5.9.2010, 17:10

)

уже ни чего не происходит! в чём дело?

В этом:

Цитата(Logree @ 5.9.2010, 14:27

)

var op = parseFloat(obj.style.opacity);

установка CSS свойства opacity не обязана влиять на Javascript-свойство opacity объекта style.

Решение — либо устанавливать свойство opacity объекта style программно после загрузки страницы, либо использовать вычисляемые стили

Код


var op = parseFloat(getComputedStyle(obj, null).opacity);

Для IE, думаю, сделаете сами (см. свойство currentStyle).

Автор: Logree 5.9.2010, 15:09

Спасибо, второй вариант подойдёт.