Задержка информации

@vipslord · Регистрация: 09.12.2013

Студворк — интернет-сервис помощи студентам

Здравствуйте.
Хочу нарисовать шахматную доску.
Да так, что бы каждая клеточка рисовалась с задержкой.
Нарисовать просто шахматную доску так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
var example2 = document.getElementById("example2"),
ctx     = example2.getContext('2d');
example2.width  = 640;
example2.height = 480;
ctx.strokeRect(15, 15, 266, 266);
ctx.strokeRect(18, 18, 260, 260);
ctx.fillRect(20, 20, 256, 256);
for (i = 0; i < 8; i += 2)
for (j = 0; j < 8; j += 2) {
ctx.clearRect(20 + i * 32, 20 + j * 32, 32, 32);
ctx.clearRect(20 + (i + 1) * 32, 20 + (j + 1) * 32, 32, 32);
}

Но оно рисует мгновенно. а я хочу каждый квадратик отдельно.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(function(){
var example = document.getElementById("example"),
    ctx     = example.getContext('2d');
    Kletka();
});
function Kletka() {
var i, j;
var example = document.getElementById("example"),
    ctx     = example.getContext('2d');
example.width  = 640;
example.height = 480;
ctx.strokeRect(15, 15, 266, 266);
ctx.strokeRect(18, 18, 260, 260);
for (i = 0; i < 8; i += 2)
    for (j = 0; j < 8; j += 2) {    
        setInterval(function fill(){
            translate(-256, -256);
            ctx.fillRect(20 + i * 32, 20 + j * 32, 32, 32);
            ctx.fillRect(20 + (i + 1) * 32, 20 + (j + 1) * 32, 32, 32);
        }  , 1000);} 
clearInterval();
}

Вопрос 1.
Почему когда пользуюсь методом сет интервал, то оно кидает рисовалку в конец полотна? Пользуюсь транслейтом, что бы назад на начальные координаты отправило.
Вопрос 2.
Почему оно цикл делает лишь один раз?
Как только нарисует два квадратика, за секунду, то больше не может?

@vooduq · 08.01.2014, 06:09

а ты интервал правильно закрываешь?

мб поможет:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
        var i = 0;
        function func(){
            if(i<=8){
                  var j = 0
                  function f(){
                      if(j<=8){
                          setTimeout(f,16); // каждые 16 миллисекунду
                          ctx.fillRect(20 + i * 32, 20 + j * 32, 32, 32); // прорисовка единицы
                          ctx.fillRect(20 + (i + 1) * 32, 20 + (j + 1) * 32, 32, 32);
                      }
                      else{ // клетка прорисована
                          func(); // вызов прорисовки новой клетки
                          return;
                      }
                  j += 2;
                  };
            }
            else return;
        i += 2;
        };
        func();

добавь там только код, которого не хватает для твоей прорисовки

@vipslord · 08.01.2014, 08:05 **[ТС]**

Спасибо за попытку, но все же так как и раньше.
Буду искать библиотеки или еще что-то.

@vooduq · 08.01.2014, 08:47

зы выход из интервала на будущее:

JavaScript
1
2
var a = setInterval();
clearInterval(a);

и обычно применяется так:

JavaScript
1
2
3
4
var a = setInterval(function(){
    // выполняемый код
    if(интервал можно завершать) clearInterval(a);
},1000); // запускается каждую секунду

так же противопоказано создавать функции в цикле, т.к. все текущие значения а кеше затираются последним, потому что:
цикл выполняется мгновенно в синхронном потоке, а функции с задержкой в асинхроном
т.е. цикл быстро вычислит все j и i и сохранит тебе последние значения, которые и будут использованы уже через секунду в функции, т.е. интервал стартует с j = 8 и i = 8 т.к. они уже вычислены, и делает одну операцию с этими клетками ( судя по всему последними ).

Во избежание используется либо мой синхронный пример вычисления, либо создание n асинхронных функций с переменными i и j в замыкании
в случае с твои кодом делается это так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
var time = 0;
for (i = 0; i < 8; i += 2)
    for (j = 0; j < 8; j += 2) {
        time += 100;
        var a = setTimeout((function fill(i,j){
            translate(-256, -256);
            ctx.fillRect(20 + i * 32, 20 + j * 32, 32, 32);
            ctx.fillRect(20 + (i + 1) * 32, 20 + (j + 1) * 32, 32, 32);
            if(i===8) clearTimeout(a);
        }(i,j))  , time);} 
}

Как это выглядит на понятном языке? Представь что ты создал n функций в файле js, но запускаются они одновременно, и тайм аут для них равен 100, 200, 300, n времени.

Но это некачественная фигня, т.к. жрет много ресурсов, делай по моему коду ( в нем одна синхронная функция ) или ищи библиотеку да если не можешь разобраться.

Добавлено через 10 минут
Возможно так заработает

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var i = 0;
        function func(){
            if(i<=8){
                  var j = 0
                  function f(){
                      if(j<=8){
                          ctx.fillRect(20 + i * 32, 20 + j * 32, 32, 32); // прорисовка единицы
                          ctx.fillRect(20 + (i + 1) * 32, 20 + (j + 1) * 32, 32, 32);
                          setTimeout(f,16); // каждые 16 миллисекунду
                      }
                      else{ // клетка прорисована
                          func(); // вызов прорисовки новой клетки
                      }
                  j += 2;
                  };
            }
        i += 2;
        };
        func();

@slagemer1 · 08.01.2014, 12:41

Великий Timeset() ф помощь!

@vipslord · 09.01.2014, 20:05 **[ТС]**

why?

@vooduq · 09.01.2014, 20:17

Сообщение от vooduq

добавь там только код, которого не хватает для твоей прорисовки

вы ленивые вообще

JavaScript
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
$(function(){
var example = document.getElementById("example"),
    ctx     = example.getContext('2d');
    Kletka();
});
function Kletka() {
var i, j;
var example = document.getElementById("example"),
    ctx     = example.getContext('2d');
example.width  = 640;
example.height = 480;
ctx.strokeRect(15, 15, 266, 266);
ctx.strokeRect(18, 18, 260, 260);
var i = 0;
        function func(){
            if(i<=8){
                  var j = 0
                  function f(){
                      if(j<=8){
                          translate(-256, -256);
                          ctx.fillRect(20 + i * 32, 20 + j * 32, 32, 32); // прорисовка единицы
                          ctx.fillRect(20 + (i + 1) * 32, 20 + (j + 1) * 32, 32, 32);
                          setTimeout(f,16); // каждые 16 миллисекунду
                      }
                      else{ // клетка прорисована
                          func(); // вызов прорисовки новой клетки
                      }
                  j += 2;
                  };
            }
        i += 2;
        };
        func();

@vipslord · 09.01.2014, 21:00 **[ТС]**

Ничего не изминилось!
+кто ленивый?
Прежде чем сказать, что проблема, я игрался долго. И даже сейчас.
Два кода. Один простой, а другой хочу анимировать. И фейл

Несколько ночей играюсь.

@vooduq · 09.01.2014, 21:03

Что такое

JavaScript
1
translate(-256, -256);

, я не вижу у тебя этой функции в коде.
Запусти бруазер, потом нажми правую кнопку мыши, затем "проинспектировать элемент". Далее открываешь консоль и смотришь ошибки ( если есть ).

@vipslord · 09.01.2014, 21:26 **[ТС]**

транслейт нужен мне, что бы начало рисовалки или же стиралки было(Fill/Clear) с верхнего левого угла.
С ним и без него результат тот же. На моих скринах он есть.
В консоли ошибок нету.
Почему ты уверен что все должно работать? У тебя после теста все успешно?

@vooduq · 09.01.2014, 21:32

забыл f() запустить

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var i = 0;
        function func(){
            if(i<=8){
                  var j = 0
                  f();
                  function f(){
                      if(j<=8){
                          translate(-256, -256);
                          ctx.fillRect(20 + i * 32, 20 + j * 32, 32, 32); // прорисовка единицы
                          ctx.fillRect(20 + (i + 1) * 32, 20 + (j + 1) * 32, 32, 32);
                          j += 2;
                          setTimeout(f,16); // каждые 16 миллисекунду
                      }
                      else{ // клетка прорисована
                          i += 2;
                          func(); // вызов прорисовки новой клетки
                      }
                  };
            }
        };
        func();

@vipslord · 09.01.2014, 21:38 **[ТС]**

Улет! Точняк! Работает.
Осталось поиграться с правильным отображением, кажись знаю где беда.

Новые блоги и статьи Все статьи Все блоги /
Вывод данных через динамический список в справочнике Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Функция заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .
Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .	Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .

@vipslord 14 / 3 / 2 Регистрация: 09.12.2013 Сообщений: 33
	08.01.2014, 08:05 [ТС]
	Спасибо за попытку, но все же так как и раньше. Буду искать библиотеки или еще что-то. 0

@slagemer1 45 / 27 / 16 Регистрация: 01.01.2014 Сообщений: 163
	08.01.2014, 12:41
	Великий Timeset() ф помощь! 0

@vipslord 14 / 3 / 2 Регистрация: 09.12.2013 Сообщений: 33
	09.01.2014, 20:05 [ТС]
	why? 0

@vipslord 14 / 3 / 2 Регистрация: 09.12.2013 Сообщений: 33
	09.01.2014, 21:00 [ТС]
	Ничего не изминилось! +кто ленивый? Прежде чем сказать, что проблема, я игрался долго. И даже сейчас. Два кода. Один простой, а другой хочу анимировать. И фейл Несколько ночей играюсь. Миниатюры 0

@vipslord 14 / 3 / 2 Регистрация: 09.12.2013 Сообщений: 33
	09.01.2014, 21:26 [ТС]
	транслейт нужен мне, что бы начало рисовалки или же стиралки было(Fill/Clear) с верхнего левого угла. С ним и без него результат тот же. На моих скринах он есть. В консоли ошибок нету. Почему ты уверен что все должно работать? У тебя после теста все успешно? 0

@vipslord 14 / 3 / 2 Регистрация: 09.12.2013 Сообщений: 33
	09.01.2014, 21:38 [ТС]
	Улет! Точняк! Работает. Осталось поиграться с правильным отображением, кажись знаю где беда. 0