Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / и снова про паузу в цикле :( / 25 сообщений из 60, страница 1 из 3
  1  все
13.11.2016, 03:19
    #39346285
neznajka
neznajka
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
и снова про паузу в цикле :(
Начитался про setTimeOut и setInterval - голова идёт кругом, а толку никакого :(
Подскажите, как в чистом JS выполнить появление внутренних элементов заданного DIV'а с некоторой задержкой?
Я пробовал вот такую конструкцию изобразить для этого:
Код: javascript
1.
2.
3.
4.
5.
cel=cont.getElementsByClassName('Container')[0]; // это - заданный DIV
	for (var q = 0; q < cel.children.length; q++) {
		cel.children[q].style.display = 'block';
		// КАК сюда вставить задержку времени 0.3сек?
	}


Подскажите, пожалуйста.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.11.2016, 07:59
    #39346303
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
и снова про паузу в цикле :(
neznajka,
попробуй промисы, возможно помогут
иначе ни как....
я не смог добиться такого
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.11.2016, 09:49
    #39346307
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
и снова про паузу в цикле :(
вадяneznajka,
попробуй промисы, возможно помогут
иначе ни как....
я не смог добиться такого
Эх, а писал, что какую-то там базу знаешь :)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.11.2016, 09:55
    #39346308
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
и снова про паузу в цикле :(
neznajka, вот Вам пример, где элементы по очереди показываются:

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
<!DOCTYPE html>
<html>
<head>
  <style>
    .Container div {
      display: none;
    }
  </style>
</head>
<body>
  <div class="Container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
  <script>
    var cel = document.getElementsByClassName('Container')[0],
        q;
    
    for (q = 0; q < cel.children.length; q++) {
      show(cel.children[q], 300 * (q + 1));
    }
      
    function show(element, timeout) {
      setTimeout(function() { element.style.display = 'block'; }, timeout);
    }
  </script>
</body>
</html>


http://plnkr.co/edit/UfUohJH7GROpJI79Eexx?p=preview

Если уберёте из кода выделенный множитель (q + 1) , то все разом покажутся через 0.3 сек.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.11.2016, 10:14
    #39346309
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
и снова про паузу в цикле :(
neznajka, а вот через setInterval:

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
<!DOCTYPE HTML>
<html>
<head>
  <style>
    .Container div {
      display: none;
    }
  </style>
</head>
<body>
  <div class="Container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>  
  <script>
    var cel = document.getElementsByClassName('Container')[0],
        q = 0, timer;

    timer = setInterval(function() {
      cel.children[q++].style.display = 'block';

      if (q == cel.children.length) clearInterval(timer);
    }, 300);
  </script>
</body>
</html>


http://plnkr.co/edit/jq4W5vCYqjP1oPiVvI0T?p=preview
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.11.2016, 11:49
    #39346324
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
и снова про паузу в цикле :(
skyANA,
а ты путаешь понятия вывод в цикле и setTimeOut и setInterval .
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.11.2016, 11:56
    #39346325
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
и снова про паузу в цикле :(
вадяskyANA,
а ты путаешь понятия вывод в цикле и setTimeOut и setInterval .
Не понимаю. Какую ты задачу себе придумал и не можешь решить?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.11.2016, 12:09
    #39346328
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
и снова про паузу в цикле :(
skyANA,

когда у тебя происходит работа в цикле
и результат необходимо выводить на каждом шаге этого цикла.
проблема в том, что если в цикле поставить cjnsole.log('ля-ля') то это л-я-ля будет появляться на каждом шаге
а если вывести на экран изменение какого-либо параметра изменение фона дивов по очереди, то этого не увидишь - измениея будут не на каждом шаге, а через непонятно какое время, и по скольку...
если дебажить код - то всё произойдет как надо.
js изменит отображаемое состояние dom, но это изменение не прорисуется на экране. поток выполнения js имеетбольший приоритет перед отображением .
у меня есть реальный пример - загрузка нескольких картинок с локального диска - работа идет в цикле , на загрузку картинки требуется около секунды, но отображаются они произвольным образом, видимо во время когда система кэширует загруженное на диск.
и setTimeOut и setInterval не помогает.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.11.2016, 12:15
    #39346329
Изопропил
Изопропил
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
и снова про паузу в цикле :(
вадяу меня есть реальный пример - загрузка нескольких картинок с локального диска - работа идет в цикле , на загрузку картинки требуется около секунды, но отображаются они произвольным образом, видимо во время когда система кэширует загруженное на диск.
и setTimeOut и setInterval не помогает
а ты обрабатываешь событие окончания загрузки картинки?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.11.2016, 12:20
    #39346333
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
и снова про паузу в цикле :(
вадяskyANA,

когда у тебя происходит работа в цикле
и результат необходимо выводить на каждом шаге этого цикла.
проблема в том, что если в цикле поставить cjnsole.log('ля-ля') то это л-я-ля будет появляться на каждом шаге
а если вывести на экран изменение какого-либо параметра изменение фона дивов по очереди, то этого не увидишь - измениея будут не на каждом шаге, а через непонятно какое время, и по скольку...
если дебажить код - то всё произойдет как надо.
js изменит отображаемое состояние dom, но это изменение не прорисуется на экране. поток выполнения js имеетбольший приоритет перед отображением .
у меня есть реальный пример - загрузка нескольких картинок с локального диска - работа идет в цикле , на загрузку картинки требуется около секунды, но отображаются они произвольным образом, видимо во время когда система кэширует загруженное на диск.
и setTimeOut и setInterval не помогает.
Мда, давай ты не будешь мне рассказывать про поток выполнения, цикл событий (event loop) и прочее...

Выше я привёл два рабочих примера со ссылками на plnkr.co, где можно посмотреть как появляются элементы.
Какие конкретно проблемы ты видишь в моём коде?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.11.2016, 12:25
    #39346335
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
и снова про паузу в цикле :(
skyANA,
а давай ты не будешь городить тут ерунду.
сравни время выполнения твоего цикла и время появления на экране.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.11.2016, 12:32
    #39346337
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
и снова про паузу в цикле :(
вадяskyANA,
а давай ты не будешь городить тут ерунду.
сравни время выполнения твоего цикла и время появления на экране.
А давай не будем переходить на личности.

Есть задача, сформулированная ТС-ом, есть два решения от меня. Давай их и обсудим.

Какие конкретно проблемы ты видишь в моих решениях?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.11.2016, 12:38
    #39346339
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
и снова про паузу в цикле :(
Возможно ты прочитал лишь заголовок темы: "и снова про паузу в цикле".
И рассуждаешь про себя как сделать паузу. Да?

А я прочитал и первое сообщение, где ТС уточняет свою проблему: "Подскажите, как в чистом JS выполнить появление внутренних элементов заданного DIV'а с некоторой задержкой?".

Вот появление элементов с задержкой я и показал на примерах выше.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.11.2016, 12:40
    #39346340
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
и снова про паузу в цикле :(
skyANA,
ТС надо в цикле поставить задержку. а не выполнить что-то отдельно , как это делают setTimeOut и setInterval.
в твоих вариантах цикл пролетел, а потом начали выполняться setTimeOut и setInterval
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.11.2016, 12:54
    #39346344
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
и снова про паузу в цикле :(
вадяskyANA,
ТС надо в цикле поставить задержку. а не выполнить что-то отдельно , как это делают setTimeOut и setInterval.
в твоих вариантах цикл пролетел, а потом начали выполняться setTimeOut и setInterval
Прости, но ты используешь странную терминологию.

Что значит выполнить что-то отдельно? Отдельно от чего?
Что значит в цикле поставить задержку? Ты таки хочешь поставить выполнение на паузу, то есть "усыпить" поток выполнения?

Давай обратимся к документации, где я выделю одно слово несколько раз красным: WindowTimers.setTimeout()

Краткое изложение
Вызов функции или выполнение фрагмента кода после указанной задержки .

Синтаксис
Код: javascript
1.
2.
var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);
var timeoutID = window.setTimeout(code, delay);


где

timeoutID - это числовой ID, который может быть использован позже с window.clearTimeout().

func - это функция, которую требуется вызвать после delay миллисекунд.

code - в альтернативном варианте применения это строка, содержащая код, который вы хотите выполнить после delay миллисекунд (использовать этот метод не рекомендуется по тем же причинам, что и eval())

delay - задержка в миллисекундах (тысячных долях секунды), после которой будет выполнен вызов функции. Реальная задержка может быть больше; см. Notes ниже.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.11.2016, 12:59
    #39346348
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
и снова про паузу в цикле :(
вадя, надеюсь ты прочитал вышенаписанное мной сообщение.

И давай теперь обратимся к первому посту ТС-а:
neznajka Начитался про setTimeOut и setInterval - голова идёт кругом, а толку никакого :(
Подскажите, как в чистом JS выполнить появление внутренних элементов заданного DIV'а с некоторой задержкой ?
И подумаем над тем, что возможно автор просто пытается сделать упражнение на использование setTimeout и setInterval :)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.11.2016, 13:11
    #39346352
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
и снова про паузу в цикле :(
skyANA,
обратимся к коду ТС
Код: javascript
1.
2.
3.
4.
for (var q = 0; q < cel.children.length; q++) {
		cel.children[q].style.display = 'block';
		// КАК сюда вставить задержку времени 0.3сек?
	}


вставить паузу в цикле, т.е. остановить на время паузы выполнение.
первое что приходит в голову setTimeOut и setInterval.
но они здесь не помогут. они не остановят цикл. они запустятся после окончания работы цикла.
да твои варианты отобразят появление с задержкой, но это будет уже после того как цикл завершится.
а это уже может нарушить остальную логиу работы, как , к примеру , у меня с загрузкой картинок.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.11.2016, 13:25
    #39346355
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
и снова про паузу в цикле :(
вадяskyANA,
обратимся к коду ТС
Код: javascript
1.
2.
3.
4.
for (var q = 0; q < cel.children.length; q++) {
		cel.children[q].style.display = 'block';
		// КАК сюда вставить задержку времени 0.3сек?
	}



вставить паузу в цикле, т.е. остановить на время паузы выполнение.
первое что приходит в голову setTimeOut и setInterval.
но они здесь не помогут. они не остановят цикл.А можешь объяснить зачем это нужно ТС-у?

вадяда твои варианты отобразят появление с задержкойТо есть сделают ровно то, что нужно ТС-у.

вадяно это будет уже после того как цикл завершится.У него в цикле что делается? Ровно одно: cel.children[q].style.display = 'block' . То есть именно эту строчку кода ТС хочет выполнить с задержкой.

вадяа это уже может нарушить остальную логиу работы, как , к примеру , у меня с загрузкой картинок.Не стоит придумывать логику, которой нет.

Но хорошо, третий вариант:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
<!DOCTYPE html>
<html>
<head>
  <style>
    .Container div {
      display: none;
    }
  </style>
</head>
<body>
  <div class="Container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
  <script>
    var cel = document.getElementsByClassName('Container')[0];
      
    loop(0, cel.children.length); // ... начало цикла ...
    
    function loop(i, l) {      
      setTimeout(
        function() {
          cel.children[i].style.display = 'block'; // ... тело цикла ...
          i = i + 1; // ... шаг цикла ...
          
          if (i < l) { // ... условие цикла ...
            loop(i, l);
          }
        }, 300);
    }
  </script>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.11.2016, 13:45
    #39346360
Изопропил
Изопропил
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
и снова про паузу в цикле :(
вадяа это уже может нарушить остальную логиу работы, как , к примеру , у меня с загрузкой картинок.
ты понадеялся на то,что картинки будут поступать в порядке выдачи запросов на загрузку?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.11.2016, 13:50
    #39346361
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
и снова про паузу в цикле :(
skyANA,
последний вариант ТС может и устроит.
но это костыль.
в данном случае подошла б команда sleep :) если б такая была.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.11.2016, 13:50
    #39346362
neznajka
neznajka
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
и снова про паузу в цикле :(
Ого, тут баталии разгорелись! Даже и не предполагал :)
В любом случае - спасибо всем за участливое отношение. И простите, что задержался с ответом - отсыпался после ночных "поединков" с непостижимой логикой синтаксиса JS :)
Да, мне пригодятся изложенные тут способы решения (отдельное спасибо skyANA), но правильно заметил и вадя: я не достаточно чётко изложил цель своего вопроса.
Исправляюсь - прилагаю тестовый упрощённый вариант своих файлов: это древовидный раскрывающийся список значений, он работает именно так, как мне и нужно - в каждый момент времени может быть открытой лишь ОДНА подгруппа.
Код за основу взял отсюда и усовершенствовал для отображения лишь одной подгруппы. Обозначу этот вариант дерева как вариант №1 .
Я просто хочу его ещё усовершенствовать, чтобы каждая подгруппа открывалась плавно. Как в этом варианте №2 (ближе к середине страницы, где дерево с пунктами "Программирование", "Верстка", "Дизайн"...). Сам этот вариант №2 с последней ссылки мне не удалось поместить в свой DIV: этот DIV у меня изначально скрытый (display: none), а когда я включаю его видимость (display: block), то вложенное в него дерево из варианта №2 становится сразу раскрытым во всех узлах :(
Поэтому я от варианта №2 отказался, и решил адаптировать под себя именно вариант №1.
И мне осталось лишь снабдить его плавностью раскрытия-закрытия. Вот и вся преамбула к моему вопросу в начале темы. Извините, если слишком запутанно изложил.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.11.2016, 13:54
    #39346364
Изопропил
Изопропил
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
и снова про паузу в цикле :(
вадяв данном случае подошла б команда sleep :) если б такая была.
а ты догадываешься, почему её нет?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.11.2016, 13:59
    #39346365
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
и снова про паузу в цикле :(
Изопропилвадяа это уже может нарушить остальную логиу работы, как , к примеру , у меня с загрузкой картинок.
ты понадеялся на то,что картинки будут поступать в порядке выдачи запросов на загрузку?
мне надо чтоб при загрузке катринки отобразилась инфа о её загрузке. порядок не интересует.
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
                <%-- загрузка через кнопку --%>
                document.getElementById('file').addEventListener('change', function (evt) {
                    var n = evt.target.files.length;
                    var a = 0;
                    for (var i = 0; i < n; i++) {
                        var reader = new FileReader();
                        $('#list_files').append('<span data-pic="' + i + '">' + this.files[i].name + ' &nbsp; &nbsp; &nbsp;</span>');
                        reader.onload = function (e) {
                            var pic = new Image();
                            pic.src = e.target.result;
                            fb['pic' + a] = pic;
                            $('#pic_div').append('<img class="pic_del" src="pic/del_.png" alt="" data-pic="' + a + '"/><img src="' + pic.src + '" alt="" data-pic="' + (a++) + '"/>');
                            $('#list_files').find('span[data-pic="' + (a - 1) + '"]').css('color', 'red');
                        };
                        reader.readAsDataURL(this.files[i]);
                    }
                }, false);
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.11.2016, 14:02
    #39346366
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
и снова про паузу в цикле :(
Изопропилвадяв данном случае подошла б команда sleep :) если б такая была.
а ты догадываешься, почему её нет?
дак я привел её только для пояснения логики.....
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.11.2016, 14:15
    #39346368
Изопропил
Изопропил
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
и снова про паузу в цикле :(
вадядак я привел её только для пояснения логики.....
тогда почему - костыль?

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
  <script>
    var cel = document.getElementsByClassName('Container')[0];
      
    loop(0, cel.children.length,function(i){cel.children[i].style.display = 'block';},300); 
         
    function loop(i, l, body,interval) {      
      setTimeout(
        function() {  
          body(i);// ... тело цикла ...    
          i = i + 1; // ... шаг цикла ...          
          if (i < l) { // ... условие цикла ...
            loop(i, l,body,interval);
          }
        }, interval);
    }
  </script>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
  1  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / и снова про паузу в цикле :( / 25 сообщений из 60, страница 1 из 3
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]