Как предотвратить запуск события во время анимации GSAP?
У меня есть анимация GSAP, подобная этой:
window.addEventListener('keydown', ()=>{
GSAP.to(this.box, {
x: this.box.position.x + 4,
duration: 1,
}
});
Я хочу увеличить позицию поля x на кратное 4, и мой текущий код выше работает, но только если пользователь ждет, пока не пройдет 1 секунда, прежде чем нажимать другую клавишу. Затем идет 0 -> 4 -> 8 и т. д.
Если они не ждут ни секунды, происходит что-то вроде 0 -> 3.76 -> 6.45. Эти числа меняются в зависимости от того, как долго пользователь ждет, прежде чем нажмет другую клавишу. Это имеет смысл, потому что я эффективно отменяю анимацию и использую текущую позицию (поскольку 1 секунда еще не прошла, она еще не дойдет до 4), а затем просто перезапускаю анимацию с текущей позицией (это не было 4).
По сути, я хочу предотвратить запуск прослушивателя событий «keydown» до тех пор, пока 1-секундная анимация не будет полностью завершена.
Как бы я это сделал?
@LeeTaylor Спасибо за предложение - я только что попробовал, вы имеете в виду что-то подобное (обновил мой пост)? он работает лучше, но если пользователь удерживает клавишу, он все равно отменяет анимацию раньше
Это трудно увидеть без полностью работающей демонстрации.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Это должно работать:
class Test {
constructor(el) {
this.box = el
window.addEventListener('keydown', () => {
if (!this.tl || !this.tl.isActive()) {
this.tl = gsap.to(this.box, {
x: "+=4",
duration: 1,
})
console.info("Moving to:", Math.floor(this.box.getBoundingClientRect().x))
}
});
}
}
const test = new Test(box)#box {
width: 25px;
height: 25px;
background: blue;
}<div id = "box"></div>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/CSSRulePlugin.min.js"></script>Вероятно, это не самое чистое решение, gsap — отличный инструмент, и, безусловно, у него есть лучший способ справиться с этим сценарием, но это первый подход жестокий, который пришел мне в голову.
Обновлено:
Использование метода isActive() уже немного лучше.
Почему бы не создать переменную, которая будет использоваться для определения того, хотите ли вы запускать код в событии?