Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Отложенные действия (https://javascript.ru/forum/misc/51315-otlozhennye-dejjstviya.html)

xayleks 02.11.2014 10:02

Отложенные действия
 
Приветствую всех.
Только начал заниматься изучением javascript, поэтому заранее прошу сильно не пинать. :)

Задался таким вот вопросом. Вроде примитивный а реализовать не могу.
Назовем его "Индикатор загрузки"
Нужно реализовать индикатор который бы показывал сначала одну точку, короткий промежуток времени, две точки, короткий промежуток времени, три точки, короткий промежуток времени, одна точка... итд
Скрипт я представляю себе примерно как то так:

var dotted;
dotted = [".", "..", "..."];
function dottA() {
    var i;
    for(i=0; i<3; i++) {
        console.log(dotted[i]);
        if(i===2){dottA();}
    }    
}
dottA();


но так вывод получается оч быстрым. Как отложить действие вывода на тот самый секундный интервал?

Erolast 02.11.2014 10:05

http://learn.javascript.ru/settimeout-setinterval
И зачем ты используешь строгое сравнение, когда заведомо известно, что переменная будет числом?

animhotep 02.11.2014 10:06

http://javascript.ru/setInterval

xayleks 02.11.2014 10:30

Спасибо, я понимаю что нужно применить сетТаймаут, только вот не пойму как
var dotted;
dotted = [".", "..", "..."];
function dottA() {
    var i;
    for(i=0; i<3; i++) {
    setTimeout(console.log(dotted[i]), 1000);        
        if(i==2){dottA();}
    }    
}
dottA();

так получается что вывод каждой строки откладывается на 1 секунду, но по сути между выводом строк интервал остаётся тоже.

Erolast 02.11.2014 10:31

Цитата:

так получается что вывод каждой строки откладывается на 1 секунду, но по сути между выводом строк интервал остаётся тоже.
Ну ты же думай, что делаешь. В функцию setTimeout первым аргументом надо передавать либо другую функцию-коллбек, либо строку с кодом, а ты отправляешь результат console.log(), это во-первых. Во-вторых, setTimeout не задерживает выполнение кода, а устанавливает то, что должно выполниться через некоторое время. У тебя выходит одномоментная инициализация трех таймеров по циклу, которые так же одномоментно выполнятся через одну секунду.
<span id="indicator"></span>
<script>
(function(maxDots) {
  var indicator = document.getElementById("indicator");
  var step = 0;

  setInterval(function() {
    indicator.innerHTML = (new Array((step++ % maxDots) + 2)).join("*");
  }, 1000);
})(3);
</script>

xayleks 02.11.2014 10:46

Огромное спасибо, свою ошибку понял. В мыслях даже не было что так сильно можно упросить код. Безсомнений плюсану

kostyanet 02.11.2014 19:15

Цитата:

Сообщение от xayleks
Нужно реализовать индикатор который бы показывал сначала одну точку, короткий промежуток времени, две точки, короткий промежуток времени, три точки, короткий промежуток времени, одна точка... итд

Нарисуйте гифку и не парьтесь. Кроме того много еще вариантов. Но точки рисовать ява-скриптом? Тогда делайте worker'а.

Erolast 03.11.2014 06:51

Очевидно же, что задача в учебных целях поставлена.

kostyanet 03.11.2014 09:37

Вот как значит теперь учат. Дают задание запрограммировать будильник - отложенное действие, а подразумевают анимацию хода стрелок будильника - повторяющееся действие.

И не callback та самая функция, ее даже может не быть https://developer.mozilla.org/en-US/...ers.setTimeout


Часовой пояс GMT +3, время: 05:37.