Перемещение элемента стрелками

[Vlad]

Есть такой код. Квадрат управляется стрелками и может перемещаться в пределах серого поля. Всё работает нормально, пока не удерживать какую-нибудь стрелку, тогда проверка ограничений не срабатывает и квадрат выходит за пределы поля. Как можно исправить этот недочёт?

http://jsfiddle.net/htmlbook/avExc/

[SelenIT]

Насколько я понимаю, проблема в том, что в этом случае куча анимаций ставится в очередь в промежуточный момент предыдущей. Игнорировать нажатия до конца предыдущей анимации (напр. как-то так) — не вариант?

[Vlad]

Думаю, что здесь не в анимации дело, а в буфере клавиатуры. Нажали 10 раз вправо, ограничение ещё не выполняется, анимация поехала.

[Great Rash]

http://jsfiddle.net/avExc/3/

[nerv]

позже допишу, сейчас надо убегать

пока оставлю это здесь http://jsfiddle.net/avExc/5/

[SelenIT]

Да, так компактнее и изящнее. Но идея вроде ж та же, что у меня — игнорить нажатия во время текущей анимации?

[Great Rash]

Там не надо ничего игнорить. В jQuery есть такое понятие как "очередь" (queue). Когда мы зажимаем стрелку на клаве она срабатывает каждые N миллисекунд и образуется гигантская очередь анимаций. По достижении квадратом края нужной области надо просто очистить очередь анимаций (clearQueue). 

[SelenIT]

По достижении квадратом края нужной области надо просто очистить очередь анимаций (clearQueue)

 

В примере http://jsfiddle.net/avExc/3/ вроде по факту получается, что очередь чистится по завершении каждой анимации? И с тем же успехом можно чистить очередь всегда, перед запуском новой анимации?

[Great Rash]

Ну да так и есть. В принципе я там перестарался, там и условия-то внутри не нужны. На счёт перед не уверен. Коллбек гарантированно сработает после анимации. А вот если я буду чистить перед, то возможно после очистки очередь всё же успеет вырости (но точно не скажу, может и прокатит). 

[nerv]

В jQuery есть такое понятие как "очередь" (queue).

я бы сказал что это понятие есть в рамках архитектуры приложения

 

По достижении квадратом края нужной области надо просто очистить очередь анимаций (clearQueue)

кстати, этого я не делал

 

примерно так http://jsfiddle.net/avExc/6/

[Great Rash]

nerv, неправильно работает. Если я отпускаю кнопку пока квадрат посередине, то он продолжает ехать до края, т.к. очередь уже большая. Как я понимаю надо же, чтобы отпустил - остановился.

[nerv]

Если я отпускаю кнопку пока квадрат посередине, то он продолжает ехать до края, т.к. очередь уже большая. Как я понимаю надо же, чтобы отпустил - остановился.

я и не пытался это реализовать. Вопрос был

проверка ограничений не срабатывает и квадрат выходит за пределы поля

можешь дописать, если хочешь

[Zverushka]

А можно ведь вместо clearQueue использовать .stop() перед началом каждой анимации?

[Great Rash]

Если .stop() очищает очередь анимации, то можно, почему нет. Но не перед началом, потому что при зажатой кнопке событие keydown срабатывает очень быстро. Т.е. есть вероятность, что событие отработает быстрее, чем выполнится .stop(), в таком случае квадрат успеет немного проехать вперёд.

[Vlad]

Спасибо всем за ответы, много интересного узнал.

[Николя223]

можно ещё проверять при нажатии кнопки -  анимирован блок или нет

 

if(block.is(":animated")==false)  , если да, то пока анимация не закончиться, остальные нажатия пропускаются. и очереди не будет

Edited December 12, 2013 by Николя223

[nerv]

Но идея вроде ж та же, что у меня — игнорить нажатия во время текущей анимации?

 

только сейчас увидел комментарий Идея как у Great Rash и, единственная, на мой взгляд, какая может здесь быть - очередь. Т.е. не игнорится, а добавляется в очередь.

При такой реализации надо ставить "фильтр" на кол-во срабатываний при зажатой кнопке (учитывать только срабатывания каждые n миллисекунд), иначе "блок упрется в бок" (хорошо сказал   ) Я в лохматом году змейку на js писал (код ужасен, ссылка в профиле), там тоже очередь юзал (насколько помню).

 

можно ещё проверять при нажатии кнопки -  анимирован блок или нет

 

во втором посте этой темы http://htmlforum.ru/index.php?showtopic=46992#entry314587

 

если да, то пока анимация не закончиться, остальные нажатия пропускаются. и очереди не будет

 

на примере человека то, что ты предлагаешь: Идешь прямо. Останавливаешься. Поворачиваешься на право. Идешь прямо. Останавливаешься. Поворачиваешь на лево. Идешь прямо.

Или как STOP в ПДД. Ты перед поворотами всегда ПОЛНУЮ остановку делаешь? )

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

[Great Rash]

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

Так оно сейчас всё равно так и работает. Анимации дальше нет пока предыдущая не отработает.

 

Вообще если уж делать перемещение квадрата по полю, то не нужно юзать .ainmate(). Надо сразу .requestAnimationFrame() и т.п. и т.д.

[nerv]

Так оно сейчас всё равно так и работает. Анимации дальше нет пока предыдущая не отработает.

ты не понял. Если есть очередь, я могу задать "движение на перед". Допустим, блок едет влево (в процессе перемещения и не закончил свое движение), я могу нажать вверх и после того, как он закончит движение влево, он поедет вверх. Если очереди нет, он останется на месте.

 

Ты же говоришь о "прерывании движения" (и не только об этом).

 

Вообще если уж делать перемещение квадрата по полю, то не нужно юзать .ainmate(). Надо сразу .requestAnimationFrame() и т.п. и т.д.

разумеется. Анимаци в жуквери одна из самых неоптимизированных (неправильных если хотите). Почти в каждой теме это пишу  

но это уже другая история...

[Николя223]

ты не понял. Если есть очередь, я могу задать "движение на перед". Допустим, блок едет влево (в процессе перемещения и не закончил свое движение), я могу нажать вверх и после того, как он закончит движение влево, он поедет вверх. Если очереди нет, он останется на месте.   Ты же говоришь о "прерывании движения" (и не только об этом).

 

Смысл тогда в анимации вообще ?

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