Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> setTimeout() с параметром, вопросы новичка 
V
    Опции темы
Logree
Дата 4.9.2010, 16:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 331
Регистрация: 22.11.2006
Где: Самара

Репутация: нет
Всего: 2



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

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?


--------------------
Самый распространенный способ дебага пятиста строк ассемблерного кода - очень долгий, очень пристальный и очень задумчивый взгляд.
PM MAIL ICQ   Вверх
Amphiluke
Дата 4.9.2010, 16:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112



Цитата(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.
PM   Вверх
ayax2005
Дата 4.9.2010, 20:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


echo $smile
**


Профиль
Группа: Участник
Сообщений: 516
Регистрация: 17.4.2008
Где: Питер

Репутация: 2
Всего: 11



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


--------------------
все вопросы - из-за неверной формулировки задачи
PM MAIL ICQ   Вверх
Logree
Дата 4.9.2010, 23:28 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 331
Регистрация: 22.11.2006
Где: Самара

Репутация: нет
Всего: 2



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

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

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

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


--------------------
Самый распространенный способ дебага пятиста строк ассемблерного кода - очень долгий, очень пристальный и очень задумчивый взгляд.
PM MAIL ICQ   Вверх
ksnk
Дата 4.9.2010, 23:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386



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, соответственно, переписать аналогично...



--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
ayax2005
Дата 5.9.2010, 02:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


echo $smile
**


Профиль
Группа: Участник
Сообщений: 516
Регистрация: 17.4.2008
Где: Питер

Репутация: 2
Всего: 11



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


--------------------
все вопросы - из-за неверной формулировки задачи
PM MAIL ICQ   Вверх
Logree
Дата 5.9.2010, 10:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 331
Регистрация: 22.11.2006
Где: Самара

Репутация: нет
Всего: 2



Уважаемый, 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);

}

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

Это сообщение отредактировал(а) Logree - 5.9.2010, 10:28


--------------------
Самый распространенный способ дебага пятиста строк ассемблерного кода - очень долгий, очень пристальный и очень задумчивый взгляд.
PM MAIL ICQ   Вверх
Amphiluke
Дата 5.9.2010, 12:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112



Цикл, ИМХО тут абсолютно не к месту… smile
Весь смысл использования метода setTimeout в том, чтобы отложить исполнение какого-то кода или вызов callback-функции на заданное время. Цикл же выполняет инструкции в своем теле безотлагательно и настолько быстро, насколько это возможно. Решение с методом setTimeout является рекурсивным, в том смысле, что callback-функция через указанный временной интервал осуществляет вызов самой себя через тот же (или другой) интервал.
А это 
Цитата(Logree @  5.9.2010,  14:27 Найти цитируемый пост)
t2 = setTimeout(function() {},20);

непонятно. Зачем порождать кучу таймеров на вызов функции с пустым телом?
PM   Вверх
Logree
Дата 5.9.2010, 13:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 331
Регистрация: 22.11.2006
Где: Самара

Репутация: нет
Всего: 2



тогда я чтото не понимаю как работает 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>


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

Это сообщение отредактировал(а) Logree - 5.9.2010, 13:11


--------------------
Самый распространенный способ дебага пятиста строк ассемблерного кода - очень долгий, очень пристальный и очень задумчивый взгляд.
PM MAIL ICQ   Вверх
Amphiluke
Дата 5.9.2010, 14:06 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112



Цитата(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).
PM   Вверх
Logree
Дата 5.9.2010, 15:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 331
Регистрация: 22.11.2006
Где: Самара

Репутация: нет
Всего: 2



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


--------------------
Самый распространенный способ дебага пятиста строк ассемблерного кода - очень долгий, очень пристальный и очень задумчивый взгляд.
PM MAIL ICQ   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »


 




[ Время генерации скрипта: 0.0734 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.