Остановка анимации по нажатию на кнопку

@arbuzov_aviator · Регистрация: 06.06.2016

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

Здравствуйте.

1. Создал кнопку по нажатию на которую с помощью setInterval организовал движение объекта в заданных рамках.
2. Создал вторую кнопку, по нажатию на которую я делаю clearInterval и объект останавливается.

Вопрос: когда нажимаю на кнопку остановки - объект останавливается, но проскакивает приблизительно 30px. Как сделать чтобы останавливался чётко в момент нажатия. Спасибо.

P.S. Надо учитывать, что этой прогой будут пользоваться и на планшетах

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$('.start').click(function(){
   counter = 100;
   move = setInterval(function(){
      counter = counter - 1; 
      $('.planca').css({right:counter}); // движение слева на право
   }, 1); 
});
 
$('.stop').click(function(){
    clearInterval(move); // остановили объект
});

Добавлено через 19 минут
Пример можно увидеть по ссылке http://www.aviaknow.ru/proftest - смотрите нижний слева пункт меню "ПЛАНКА". В разных режимах разная скорость.

@TA1ex · 06.06.2016, 19:58

Нормально всё останавливается. В момент клика. Зависит от отзывчивости мыши и производительности ПК.

Попробуйте сделать не на событие click, а на событие mousedown

@arbuzov_aviator · 10.06.2016, 05:52 **[ТС]**

Пробовал. "Тормозной путь" не пропадает. Об этом же пишут и пользователи сайта.

@TA1ex · 10.06.2016, 10:48

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

Пробовал. "Тормозной путь" не пропадает. Об этом же пишут и пользователи сайта.

Вот я не понимаю о чем вы сейчас. Я пробовал поиграться, я не пилот, но после пары раз получается остановить полоску на точке. Тормозной путь не увидел. Возможно проблемы у пользователей с дешевыми мышами с высоким временем отклика? Попробуйте сгенерировать остановку программно (по заданному времени) либо повесить событие на кнопку клавиатуры (key down естественно, а не key press)

@arbuzov_aviator · 10.06.2016, 11:00 **[ТС]**

Я думаю, что вам приходилось нажимать заранее, чтобы движущийся объект остановился там, где это необходимо. А моя цель: остановить объект именно в момент нажатия. Буду пробовать с клавой. Ждите результатов. Спасибо.

@sad67man · 10.06.2016, 11:05

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

@TA1ex · 10.06.2016, 11:15

Не по теме:

Возможно это инерция реакции (программная остановка все решит). Смотрите сколько факторов:
1. Время между видеофиксацией положения полоскии поступлением информации в мозг
2. Время между командой от мозга нажать на кнопку и реакцией
3. Время, необходимое на совершение нажатия
4. Отзывчивость мыши (у типичной офисной мыши 8-16 мс - посчитайте сколько пикселей пройдет полоска даже при идеальной реакции)
5. Отзывчивость ПК
От п.1 к п.5 время увеличивается. Причем львиную долю от общего времени составляют пункты 4 и 5. Что как мне кажется не совсем отражает идею данного тестирования. Поэтому необходимо минимизировать эти факторы

В идеале можно ввести программную поправку на не зависящие от человека факторы

P.S. Обычно, если где-то необходимо точное время хорошей практикой считается привязка к системному таймеру, а не к функции setInterval где 1мс мягко говоря не всегда равна 1мс

Добавлено через 4 минуты

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

Событие происходит при отжатии клавиши мыши

Реакция на mouse down казалось бы должна была решить эту проблему

@arbuzov_aviator · 14.06.2016, 21:10 **[ТС]**

Вопрос решён:

JavaScript
1
$('.btn').on('mousedown touchstart', function(){});

touchstart - для планшетов

Спасибо за участие.

Новые блоги и статьи Все статьи Все блоги /
Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит токи на L и напряжения на C в установ. режимах до и. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?
Сукцессия микоризы: основная теория в виде двух уравнений. 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 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@TA1ex 120 / 34 / 9 Регистрация: 12.03.2015 Сообщений: 125
	06.06.2016, 19:58
	Нормально всё останавливается. В момент клика. Зависит от отзывчивости мыши и производительности ПК. Попробуйте сделать не на событие click, а на событие mousedown 1

@arbuzov_aviator 0 / 0 / 0 Регистрация: 06.06.2016 Сообщений: 4
	10.06.2016, 05:52 [ТС]
	Пробовал. "Тормозной путь" не пропадает. Об этом же пишут и пользователи сайта. 0

@arbuzov_aviator 0 / 0 / 0 Регистрация: 06.06.2016 Сообщений: 4
	10.06.2016, 11:00 [ТС]
	Я думаю, что вам приходилось нажимать заранее, чтобы движущийся объект остановился там, где это необходимо. А моя цель: остановить объект именно в момент нажатия. Буду пробовать с клавой. Ждите результатов. Спасибо. 0

@sad67man 2603 / 1507 / 689 Регистрация: 23.08.2015 Сообщений: 3,815
	10.06.2016, 11:05
	arbuzov_aviator, Событие происходит при отжатии клавиши мыши. Если заранее зажать клавишу мыши, а потом в нужный момент ее отпустить. То вроде как тормозного пути нет. 1