Рекурсия и setTimeout()
Требовалось написать слайдшоу. Главное условие - "лёгкость".
Я только начал осваивать js, да и программирование в целом, поэтому первый вариант был таков:
var i1=new Image(); i1.src="img/slideshow1/i1.jpg";
var i2=new Image(); i2.src="img/slideshow1/i2.jpg";
var i3=new Image(); i3.src="img/slideshow1/i3.jpg";
var i4=new Image(); i4.src="img/slideshow1/i4.jpg";
var i5=new Image(); i5.src="img/slideshow1/i5.jpg";
var i6=new Image(); i6.src="img/slideshow1/i6.jpg";
var i7=new Image(); i7.src="img/slideshow1/i7.jpg";
var i8=new Image(); i8.src="img/slideshow1/i8.jpg";
function op() { setTimeout("op9()",4000); }
function op9() { document.images.slide.style.opacity=0.9; setTimeout("op8()",speed); }
function op8() { document.images.slide.style.opacity=0.8; setTimeout("op7()",speed); }
function op7() { document.images.slide.style.opacity=0.7; setTimeout("op6()",speed); }
function op6() { document.images.slide.style.opacity=0.6; setTimeout("op5()",speed); }
function op5() { document.images.slide.style.opacity=0.5; setTimeout("op4()",speed); }
function op4() { document.images.slide.style.opacity=0.4; setTimeout("op3()",speed); }
function op3() { document.images.slide.style.opacity=0.3; setTimeout("op2()",speed); }
function op2() { document.images.slide.style.opacity=0.2; setTimeout("op1()",speed); }
function op1() { document.images.slide.style.opacity=0.1; setTimeout("slide()",speed); }
function slide() { if (!document.images) return; document.images.slide.src=eval("i"+step+".src"); if (step<8) step++; else step=1; setTimeout("o2()",speed); }
function o2() { document.images.slide.style.opacity=0.2; setTimeout("o3()",speed); }
function o3() { document.images.slide.style.opacity=0.3; setTimeout("o4()",speed); }
function o4() { document.images.slide.style.opacity=0.4; setTimeout("o5()",speed); }
function o5() { document.images.slide.style.opacity=0.5; setTimeout("o6()",speed); }
function o6() { document.images.slide.style.opacity=0.6; setTimeout("o7()",speed); }
function o7() { document.images.slide.style.opacity=0.7; setTimeout("o8()",speed); }
function o8() { document.images.slide.style.opacity=0.8; setTimeout("o9()",speed); }
function o9() { document.images.slide.style.opacity=0.9; setTimeout("o1()",speed); }
function o1() { document.images.slide.style.opacity=1; setTimeout("op9()",2500); }
Несмотря на дикость кода, он работал чётко и насиловал процессор в три раза меньше, чем его аналог на jQuery (стоит отметить, что на jQuery код получился гораздо изящнее в исполнении, но я от него отказался). И вот последняя редакция первого варианта кода. Вроде всё должно работать, но почему-то функция slidePic() не хочет вызывать саму себя (т.е. происходит только первый вызов из функции loadPic()), хотя уже был опыт использования подобной рекурсии. Подозреваю, что дело может быть в setTimeout(), но медитация и курение мануалов пока не принесли результатов:
var step=2;
var speed=80;
var pic=new Object();
var countPic=8;
var arrPic=new Array();
var opc=9; var nav=0;
var app=navigator.appVersion.indexOf("MSIE");
function loadPic()
{
pic=document.getElementById("sl");
for(i=1;i<countPic+1;i++)
{
arrPic[i]=new Image();
arrPic[i].src="img/slideshow1/i"+i+".jpg";
}
setTimeout(slidePic,2500);
}
function slidePic()
{
op=opc/10;
pic.style.opacity=op;
if(app>=0){op*=100;
document.getElementById("sl").style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+op+")";}
else pic.style.opacity=op;
if(nav==0)
{
if(opc==0)
{
pic.src=arrPic[step].src;
if(step==countPic) step=1;
else step++;
opc=1; nav=1;
setTimeout(slidePic,speed);
}
else
{
opc--;
setTimeout(slidePic,speed);
}
}
else
{
if(opc==10)
{
opc=9; nav=0;
setTimeout(slidePic,2500);
}
else
{
opc++;
setTimeout(slidePic,speed);
}
}
}
Фрагмент html-разметки (в первом варианте по onload запускалась функция op()): <body onload="loadPic()"><!--other content--> <img src="img/slideshow1/i1.jpg" id="sl" name="slide"><!--other content--></body> Не знаю как отловить ошибку. И, конечно, буду благодарен за указания по оптимизации этого кода. |
|
Статья неплохая. Убрал кавычки и параметры, код заработал (отредактировал исходный пост).
А вот какой из этих вариантов менее нагружает систему я ещё размышляю. Во втором варианте используется только одна функция, а в первом - 19. В то же время в первом варианте каждая из функций (кроме slide()) крайне примитивны, а во втором варианте каждый раз функция выполняет несколько (4-6) вычислений. Получается одна итерация "цикла" (одна фотография слайдшоу) в первом варианте использует 19 простых функций, а во втором 18 раз одну, но более сложную функцию. Опять же - 19 функций первого варианта постоянно занимают память. Поправьте, если бред говорю. |
Посмотрите каталог моих фото-шоу вот тут http://kohnvict.narod.ru/b/ph-sh-list.htm, js код можно посмотреть в каждом файле. Все делается по javascript программе, там ссылка указана. А на моем сайте http://kohnvict.narod.ru есть анимация иконок каталога, все написано в книге http://xray-optics.ucoz.ru/vk-js-book.htm
|
Цитата:
Виктор вы уж простите, но ваше слайдшоу глюкает если понажимать back в середине слайдшоу. Одно дело если вы пишете код для себя, другое вы предлагаете посмотреть другим. Вы не получите здесь признание, пока не прислушаетесь к мнению окружающих. Вы, казалось бы, взрослый человек - перестаньте плодить подобный код и уж тем более его пиарить, ведь форум читают даже дети, а вдруг они вам поверят на слово, что так писать хорошо?! В своем мирке мы все божки. |
Про глюкает хотелось бы поподробнее, также хотелось бы понять чем мой код плохой, по крайней мере у меня setTimeout написано только один раз. Слово окружающие не есть синоним слова Gozar, а пиарят все, в том числе и вы. С кнопкой back никаких проблем нет, просто надо уметь пользоваться.
|
Я пока не смотрел вышеупомянутый сайт, но "С кнопкой back никаких проблем нет, просто надо уметь пользоваться" - это в корне неверная логика, так как большинство интернет посетителей даже не имеют понятия про яваскрипт и если код лагает в результате "не так нажал", то будьте уверены - не так нажимать будут постоянно.
|
А вы просто посмотрите. Нет никаких глюков вообще. Это мне наговорили в другом посте. Кнопка back меняет направление показа на обратное, при этом нажимать ее надо всего один раз, если пять раз нажать - эффект тот же. А кто-то решил, что она при каждом нажатии меняет направление. Восстанавливает направление кнопка Start. Но большинство вообще не пользуется кнопками, это просто дополнительная редкая услуга.
|
Виктор, я был бы признателен вам, если вы напишите суть вашего кода слайдшоу, ибо разбирать чужой не хочу, нет сейчас времени и желания.
В моём варианте изначально слайдшоу не работает, а просто загружается изображение - это позволит быстрее загрузится странице, а лишь затем подгружаю остальные фото слайдшоу. Суть кода - через равные промежутки времени для <img id="sl" />меняется src с помощью уже имеющихся в памяти изображений. Для красоты добавил плавное изменение прозрачность, через изменение насыщенности. На данный момент я не знаю как сделать это слайдшоу менее тяжёлым для системы пользователя с сохранением плавности. |
Ещё добавил ИЕ в список браузеров, обладатели которого смогут насладится моим слайдшоу, строками 7, 22 и 23. Ещё одна любопытная особеность - интернет эксплорер не хочет менять насыщенность через ссылку на объект, поэтому пришлось каждый раз обращатся прямо к объекту - строка 23. Мистика?
|
В двух словах идея такая. Подгружать изображения в процессе не очень стабильно. Поэтому сначала делается массив картинок, указываются их адреса (полные, картинки, как правило, не мои, а находятся в соц. сети Яндекс-фотки, для этого и делал), к каждой картинке определяется массив параметров перехода, переходов может быть бесконечное множество, но я сделал 23 стандартных, остальные надо описывать вручную. А потом запускается единственная функция с один раз написанным setTimeout(), но пауза каждый раз меняется. В функции довольно неслабый математический блок, который просчитывает все параметры div областей верхней и нижней картинок и меняет их при каждом новом обращении к функции. Математика оперирует глобальными переменными, это возможно самый слабый момент кода, но при желании имена переменных можно написать так, чтобы они ни с чем больше не конфликтовали. Есть возможность ставить на страницу хоть 10 анимаций одновременно. Чтобы не было ошибок и опечаток сам код ни я, ни мои клиенты не пишут. Для этого написана другая Javascript программа, которая сама пишет код по очень простой системе входных данных. Адрес программы указан в каталоге. Есть еще одна трудность. Картинки я выбираю в интернете, точнее узнаю адреса, а потом надо еще все это поставить по порядку и по смыслу. Для этого я использую уже другую программу, написанную на моем языке ACL (интерпретатор на Java). Со временем я ее может тоже выставлю в интернет, но пока это только для меня. Вот например я натаскал 60 фоток по Сингарупу или по Шанхаю. Составил список, но мне ведь надо выстроить сюжет, отсеять одинаковые, то есть их надо смотреть, а затем переставлять или убирать. Если этого не делать, то анимация делается за 10 минут.
|
Цитата:
Цитата:
Цитата:
Эдак получается, купил зубную щетку и каждый раз инструкцию читаешь как ею пользоваться. Вдруг зубы нужно чистить засовывая щётку через задний проход или через нос, а то она не чистить зубы будет, а загрязнять. По сути я описал принцип вашей галереи. |
Цитата:
Не так хорош ваш скрипт как вы тут его превозносите. Как настроить интерфейс и задать нужные параметры в вашем скрипте не лазя в какие-то там другие программы? И вообще что это за копипастерное дерьмо: par[3] = [ 5000, 0, 0, 10, 800, -600, 30, 0]; imga[4] = new Image(); imga[4].src="http://img-fotki.yandex.ru/get/3614/kohnvict.7/0_14cfd_3a2b2117_XL.jpg"; par[4] = [ 5000, 0, 0, 10, -800, 0, 30, 0]; imga[5] = new Image(); imga[5].src="http://img-fotki.yandex.ru/get/3614/kohnvict.7/0_14cfe_3c64ed90_XL.jpg"; par[5] = [ 5000, 0, 0, 10, 800, 0, 30, 0]; imga[6] = new Image(); imga[6].src="http://img-fotki.yandex.ru/get/3513/kohnvict.7/0_14cff_2425c061_XL.jpg"; par[6] = [ 5000, 0, 0, 10, 0, -600, 30, 0]; imga[7] = new Image(); imga[7].src="http://img-fotki.yandex.ru/get/3510/kohnvict.7/0_14d00_13475b60_XL.jpg"; par[7] = [ 5000, 0, 0, 10, 0, 600, 30, 0]; imga[8] = new Image(); imga[8].src="http://img-fotki.yandex.ru/get/3510/kohnvict.7/0_14d01_3c26c2c8_XL.jpg"; par[8] = [ 5000, 0, 0, 10, -800, 0, 60, 1]; Вы не в курсе что такое json? Идите и учите матчасть. и про switch почитайте:
if( kt == 0 )
if( kt == 1 )
хотя мне даже лень думать над этим говнокодом, возможно там можно обойтись было и более элегантным решением. Парить тут не надо математикой. Это форум программистов, а не девушек поварих в столовой. Здесь все в курсе, математики и по большей части у всех вышка за плечами. |
Уважаемый Gozar, я все понял. В каждом болоте есть свои лягушки, которые квакают и чужаков не принимают. Мы с вами принципиальные враги. Я всю жизнь делал не как все и дальше так буду. Я вы как полковник, который не любит высовывающихся солдат. Вон один только что получил 4 года за то, что ударил солдата. Возможно и до вас очередь дойдет.
Про switch я знаю, как и многое другое, чего и вы не знаете. Только имею право писать как мне удобно. Вы наверно знаете, что есть люди, которые до сих пор программируют на асемблере. И никаких книжек про json не читают. А если вы хотите 5000 фоток показывать, то как вы адреса будете писать, через json и кучу других файлов. А какая разница. И зачем мне писать код, в котором кто-то будет копаться. Код у меня простой, но на других я не рассчитывал. У вас просто другая религия, причем аргессивная, иноверцев не терпит. Ну и с культурой слабовато, много хамства и неуважения к людям. С форума я ухожу, нет смысла ругаться с дураками. |
Цитата:
Цитата:
|
В чем противоречие. Я могу написать код, который можно будет настраивать, но я использую другое решение. Настройка кода делается в программе-генераторе. Почему так нельзя? Так намного удобнее. А настроить интерфейс каждый сможет, если умеет. А если не умеет, так кто же ему поможет, на учиться. Посмотреть код не значит его переписывать (использовать).
|
Цитата:
Цитата:
|
Цитата:
Мне не за что вас уважать, вы не уважаете язык на котором написали программу. Вы просто невежа и упрямец. Цитата:
Это форум по javascript, а не по ассемблеру, java или ACL. Не хотите чтобы с вами спорили, не пишите на форуме. Цитата:
Но это даже не важно, а важно то, что вы не хотите ничему учиться, а значит - "Adios Amigo". Ваш стиль похож на "твоя дом труба шатал". А ругаюсь я с вами из-за того, что из-за таких говноскриптов я долгое время думал, что javascript какой-то недоязык. Не принимайте близко к себе, я не уважаю только вашу часть, которая пишет такой код. Вы сами как личность мне не интересны. |
Уважаемый Gozar. Попробую все таки объяснить. Любой javascript код хорош, если он работает, не глючит и не содержит ошибок. Пушкин писал стихи на другом русском языке, там нет таких слов как "глючит" и прочее. Но его до сих пор читают. Чем примитивнее код, тем он стабильнее.
А подход со сторонней программой позволяет получать готовый сайт даже тем людям, которые вообще не знают Javascript. Я именно этого и хотел. И я реально знаю людей, которые используют программу совсем не зная javascript, и у них все отлично работает. Использовать jquery, json и прочие фреймворки и библиотеки вовсе не обязательно, если в этом нет необходимости. В этом посте выступил человек, который тоже не учился и его код хуже моего. И таких на форуме много. Однако почему-то все ополчились именно на мой код и главный аргумент - код не современный, не как у всех. Но это же смешно. Живите своей жизнью, мне по сути ничего не нужно ни от вас, ни от вашего форума. Однако если вы перестали считать javascript недоделанным уродом, то вы как раз и ошибаетесь. Он такой и таким будет всегда. |
Цитата:
|
Цитата:
|
вот ссылка
https://github.com/douglascrockford/JSON-js вы же наверно не сам язык YAML имели в виду, а средства работы с ним. Что можно сделать с пустым языком? Я заполнил массив вручную, вам не понравилось, вы написали что так нельзя. Но не написали как? Это вообще ваш стиль - ругать неконструктивно. |
Народ, хватит обращать на него внимание! Он же тролль!!!
|
Цитата:
var url = "http://img-fotki.yandex.ru/get";
var data = [
{par: [ 5000, 0, 0, 10, 800, -600, 30, 0], src: url+"/3614/kohnvict.7/0_14cfd_3a2b2117_XL.jpg"},
{par: [ 5000, 0, 0, 10, 0, -600, 30, 0], src: url+"/3614/kohnvict.7/0_14cfe_3c64ed90_XL.jpg"}
]
в конце for по массиву объектов.
Собственно это пример не для вас, вы всё равно уже для нас потеряны, а для тех кто будет кроме вас читать эту тему. Пусть их минует дурдом клонирования imga[i] = new Image(); imga[i].src; Вы сами того не осознавая доказали всё величие js. У него очень низкий порог вхождения и даже программисты других языков в принципе могут легко реализовать то, что хотят, не углубляясь в подробности. Всё остальное зависит от характера человека, может и лягушкой остаться, квакающей только. ;) |
Во-первых, спасибо за конкретный ответ, а не просто брань и упреки.
Во-вторых, объясню почему мне это не подходит. Конечно imga[i] я могу определить в цикле, это не проблема. Возможно я даже перепишу программу и так сделаю. Но я и так делаю в цикле. Ведь этот код я руками не пишу, его пишет программа, которая как раз это делает в цикле. Далее, сокращать адреса мне нельзя, я ведь их тоже не пишу, я их копирую из адресной строки браузера и любое их изменение - это лишняя работа. Массив адресов формируется в текстовом файле и считывается из него. Адреса копируются, я не набираю ни одной буквы. Они могут быть совершенно произвольными, это случайно так получилось, что есть одинаковые куски конкретно в данном файле. Конечно можно записать par и src без индексов, но какая разница. Компьютер быстрее работать не будет, он и так быстро работает. Ваш код просто приводит к лишней головной боли не меняя по сути ничего. И это не json а просто объекты в js. |
Цитата:
Цитата:
что в java нельзя сделать что-то подобное?:
["{par:}","{par}"].join(",");
Цитата:
Цитата:
Поэтому либо примите к сведению, либо вы тупой тролль. |
И все таки я не понимаю кто из нас тролль и чего вы добиваетесь. Автор данного поста выложил свой код, который на порядок хуже моего. Про него уже забыли, все набросились на меня. Я свой код не выкладывал, писал автору поста, а в результате читаю ваши нападки. А не знаю кто такой программист. Мне казалось - это человек, который пишет работающие программы. А как выглядит код, у каждого свои приемы. И каждый имеет право советовать свои приемы. Мой код работает, значит я программист. Но на самом деле я не продаю свои программы, значит не программист. Автор данного поста тоже не программист. Как и очень многие тут на форуме. Надоело, больше писать не буду.
|
Цитата:
|
хотел сделать рекурсивно.
setTimeout не обрабатывался пока не завернул свою функцию и анонимную функцию.
// массив елементор
var mans = document.querySelectorAll('.man');
function paintBG(elemsArray,startNum,timeoutMs,classSrt) {
elemsArray[startNum].classList.add(classSrt);
if(elemsArray[++startNum]){
setTimeout(()=>{paintBG(elemsArray,startNum,timeoutMs,classSrt)
},timeoutMs);
}
else{
return console.log('end');
}
};
paintBG(mans,0,500,'man_red');
|
| Часовой пояс GMT +3, время: 09:17. |