Действие таймера

@Aleksandrw · Регистрация: 05.01.2018

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

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

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var timer;
var begin = 0;
var body = document.getElementById("body"); 
 
function stop () {
    clearTimeout (timer);
}
 
document.onkeypress = function (event) {
    if (event.keyCode == 115 || event.keyCode == 1099){
    down_action ();
     function down_action (){
    stop ();
    body.style.top = begin + "px";
    begin += 10;
    timer = setTimeout (down_action,1000);
     }
    }   
return false;
   }

@klopp · 14.02.2018, 03:46

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

нажимаем клавишу много раз

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

@j2FunOnly · 14.02.2018, 10:53

Aleksandrw, чего вы хотите добиться? Чтобы через определённый промежуток времени после последнего нажатия блок переместился на расстояние в зависимости от количества нажатий?

HTML5
1
<div class="block"></div>

CSS
1
2
3
4
5
6
.block {
  transition: transform .2s;
  width: 50px;
  height: 50px;
  background-color: green;
}

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
var timer,
  begin = 0,
  block = document.querySelector('.block'),
  KEY_CODES = {
    F4: 115
  };
 
function stop() {
  clearTimeout(timer);
}
 
function down_action() {
  console.log('down_action')
  block.style.transform = 'translateY(' + begin + 'px)';
}
 
document.onkeydown = function(event) {
  console.log('onkeydown');
  if (event.keyCode == KEY_CODES.F4) {
    console.log('f4');
    stop();
    begin += 10;
    timer = setTimeout(down_action, 500);
  }
  return false;
}

https://jsfiddle.net/j2FunOnly/6mxrLdae/

@Aleksandrw · 14.02.2018, 13:30 **[ТС]**

j2FunOnly, нет, должно работать так : клавишу нажали , запускается таймер - начинается движение; повторное нажатие клавиши - функция не реагирует на данное событие .

@j2FunOnly · 14.02.2018, 13:31

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

повторное нажатие клавиши - функция не реагирует на данное событие

В смысле повторное нажатие останавливает движение?

@Aleksandrw · 14.02.2018, 13:39 **[ТС]**

klopp, можно каким-либо образом привязать строку 14 строго к таймеру, т.е первое нажатие - всё начинает работать, а далее данное событие срабатывает только по истечению таймера, а не по нажатию клавиши?

Добавлено через 4 минуты
j2FunOnly, нет, задача решить такую проблему: первое нажатие - всё хорошо, таймер запускается, движение начинается. Но если я буду быстро нажимать клавишу снова: функция не будет дожидаться истечения таймера ( а хотелось бы ) и объект будет перемещаться моментально ( что очень не хорошо ).

@j2FunOnly · 14.02.2018, 13:56

Aleksandrw, то есть нажали, к примеру, пять раз - блок сдвинулся с одинаковым перерывом (не зависимо от скорости нажатия клавиши) 5 раз?

Добавлено через 9 минут
Или вообще вам надо так: нажали кнопку - равномерно опускается блок, отпустили кнопку - остановился блок?

@Aleksandrw · 14.02.2018, 14:02 **[ТС]**

j2FunOnly, вот что происходит, если я постоянно нажимаю клавишу. И это неправильно.

@Aleksandrw · 14.02.2018, 14:18 **[ТС]**

j2FunOnly, должно быть вот так . Т.е много раз нажимаем клавишу , а работа таймера всё равно происходит стабильно (движение строго через одну секунду ).

@klopp · 14.02.2018, 14:34

я там чушь кажется написал выше....
Можно так решить:
имя для переменной и для идентификатора не очень удачно вы выбрали...

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var timer, begin = 0, flag = false;
var bd = document.querySelector(".bd"); 
function stop(timer) {
    clearTimeout(timer);
}
function down_action (){
    flag = true;
    begin += 10;
    bd.style.top = begin + "px";
    timer = setTimeout(down_action,1000);
}
document.onkeypress = function (event) {
    if ((event.keyCode == 115 || event.keyCode == 1099) && !flag)
        down_action ();
}

@j2FunOnly · 14.02.2018, 14:35

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
var count = 0,
  begin = 0,
  block = document.querySelector('.block'),
  KEY_CODES = {
    F4: 115
  };
 
function stop() {
    count = 0;
}
 
function down_action() {
  console.log('down_action')
  if (count === 0) return;
  
  begin += 10;
  block.style.transform = 'translateY(' + begin + 'px)';
  count--;
  setTimeout(down_action, 500);
}
 
document.onkeydown = function(event) {
  console.log('onkeydown');
  if (event.keyCode == KEY_CODES.F4) {
    console.log('f4');
    if (count === 0) setTimeout(down_action, 500);
        count++;
  }
  return false;
}

https://jsfiddle.net/j2FunOnly/6mxrLdae/8/

@msheal · 14.02.2018, 14:42

Вариант j2FunOnly реализует цепочку вызовов.

Если нужно именно

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

клавишу нажали , запускается таймер - начинается движение; повторное нажатие клавиши - функция не реагирует на данное событие

, то:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var timer,
  begin = 0,
  block = document.querySelector('.block'),
  KEY_CODES = {
    F4: 115
  };
 
function down_action() {
  console.log('down_action');
  clearTimeout(timer);
  timer = null;
  block.style.transform = 'translateY(' + begin + 'px)';
}
 
document.onkeydown = function(event) {
  if (event.keyCode == KEY_CODES.F4 && !timer) {
    console.log('f4');
    begin += 10;
    timer = setTimeout(down_action, 500);
  }
  return false;
}

https://jsfiddle.net/q0hrsb3n/

@Aleksandrw · 14.02.2018, 14:47 **[ТС]**

klopp, j2FunOnly, msheal, всем спасибо

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .

@Aleksandrw 39 / 38 / 26 Регистрация: 05.01.2018 Сообщений: 283
	14.02.2018, 13:30 [ТС]
	j2FunOnly, нет, должно работать так : клавишу нажали , запускается таймер - начинается движение; повторное нажатие клавиши - функция не реагирует на данное событие . 0

@Aleksandrw 39 / 38 / 26 Регистрация: 05.01.2018 Сообщений: 283
	14.02.2018, 13:39 [ТС]
	klopp, можно каким-либо образом привязать строку 14 строго к таймеру, т.е первое нажатие - всё начинает работать, а далее данное событие срабатывает только по истечению таймера, а не по нажатию клавиши? Добавлено через 4 минуты j2FunOnly, нет, задача решить такую проблему: первое нажатие - всё хорошо, таймер запускается, движение начинается. Но если я буду быстро нажимать клавишу снова: функция не будет дожидаться истечения таймера ( а хотелось бы ) и объект будет перемещаться моментально ( что очень не хорошо ). 0

@j2FunOnly the hardway first 2475 / 1847 / 910 Регистрация: 05.06.2015 Сообщений: 3,610
	14.02.2018, 13:56
	Aleksandrw, то есть нажали, к примеру, пять раз - блок сдвинулся с одинаковым перерывом (не зависимо от скорости нажатия клавиши) 5 раз? Добавлено через 9 минут Или вообще вам надо так: нажали кнопку - равномерно опускается блок, отпустили кнопку - остановился блок? 0

@Aleksandrw 39 / 38 / 26 Регистрация: 05.01.2018 Сообщений: 283
	14.02.2018, 14:02 [ТС]
	j2FunOnly, вот что происходит, если я постоянно нажимаю клавишу. И это неправильно. Изображения 0

@Aleksandrw 39 / 38 / 26 Регистрация: 05.01.2018 Сообщений: 283
	14.02.2018, 14:18 [ТС]
	j2FunOnly, должно быть вот так . Т.е много раз нажимаем клавишу , а работа таймера всё равно происходит стабильно (движение строго через одну секунду ). Изображения 0

@Aleksandrw 39 / 38 / 26 Регистрация: 05.01.2018 Сообщений: 283
	14.02.2018, 14:47 [ТС]
	klopp, j2FunOnly, msheal, всем спасибо 0