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

@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 **[ТС]**

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

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@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