ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / и снова про паузу в цикле :(
25 сообщений из 60, страница 1 из 3
  1  все
и снова про паузу в цикле :(
    #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, 03:19
| Ответить | Цитировать | Написать  
и снова про паузу в цикле :(
    #39346303
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
neznajka,
попробуй промисы, возможно помогут
иначе ни как....
я не смог добиться такого
...
Рейтинг: 0 / 0
13.11.2016, 07:59
| Ответить | Цитировать | Написать  
и снова про паузу в цикле :(
    #39346307
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
вадяneznajka,
попробуй промисы, возможно помогут
иначе ни как....
я не смог добиться такого
Эх, а писал, что какую-то там базу знаешь :)
...
Рейтинг: 0 / 0
13.11.2016, 09:49
| Ответить | Цитировать | Написать  
и снова про паузу в цикле :(
    #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, 09:55
| Ответить | Цитировать | Написать  
и снова про паузу в цикле :(
    #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, 10:14
| Ответить | Цитировать | Написать  
и снова про паузу в цикле :(
    #39346324
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
skyANA,
а ты путаешь понятия вывод в цикле и setTimeOut и setInterval .
...
Рейтинг: 0 / 0
13.11.2016, 11:49
| Ответить | Цитировать | Написать  
и снова про паузу в цикле :(
    #39346325
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
вадяskyANA,
а ты путаешь понятия вывод в цикле и setTimeOut и setInterval .
Не понимаю. Какую ты задачу себе придумал и не можешь решить?
...
Рейтинг: 0 / 0
13.11.2016, 11:56
| Ответить | Цитировать | Написать  
и снова про паузу в цикле :(
    #39346328
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
skyANA,

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

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

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

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

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

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

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

И давай теперь обратимся к первому посту ТС-а:
neznajka Начитался про setTimeOut и setInterval - голова идёт кругом, а толку никакого :(
Подскажите, как в чистом JS выполнить появление внутренних элементов заданного DIV'а с некоторой задержкой ?
И подумаем над тем, что возможно автор просто пытается сделать упражнение на использование setTimeout и setInterval :)
...
Рейтинг: 0 / 0
13.11.2016, 12:59
| Ответить | Цитировать | Написать  
и снова про паузу в цикле :(
    #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:11
| Ответить | Цитировать | Написать  
и снова про паузу в цикле :(
    #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:25
| Ответить | Цитировать | Написать  
и снова про паузу в цикле :(
    #39346360
Фотография Изопропил
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Изопропил
Участник
вадяа это уже может нарушить остальную логиу работы, как , к примеру , у меня с загрузкой картинок.
ты понадеялся на то,что картинки будут поступать в порядке выдачи запросов на загрузку?
...
Рейтинг: 0 / 0
13.11.2016, 13:45
| Ответить | Цитировать | Написать  
и снова про паузу в цикле :(
    #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:50
| Ответить | Цитировать | Написать  
и снова про паузу в цикле :(
    #39346364
Фотография Изопропил
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Изопропил
Участник
вадяв данном случае подошла б команда sleep :) если б такая была.
а ты догадываешься, почему её нет?
...
Рейтинг: 0 / 0
13.11.2016, 13:54
| Ответить | Цитировать | Написать  
и снова про паузу в цикле :(
    #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, 13:59
| Ответить | Цитировать | Написать  
и снова про паузу в цикле :(
    #39346366
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Изопропилвадяв данном случае подошла б команда sleep :) если б такая была.
а ты догадываешься, почему её нет?
дак я привел её только для пояснения логики.....
...
Рейтинг: 0 / 0
13.11.2016, 14:02
| Ответить | Цитировать | Написать  
и снова про паузу в цикле :(
    #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
13.11.2016, 14:15
| Ответить | Цитировать | Написать  
25 сообщений из 60, страница 1 из 3
  1  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / и снова про паузу в цикле :(
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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