我有一個像這樣的 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）。
本質上，我想防止在 1 秒影片完全完成之前觸發“keydown”事件偵聽器。
我該怎么做？
uj5u.com熱心網友回復：
window.addEventListener('keydown', ()=>{
if(this.prevent === false){
this.prevent = true;
GSAP.to(this.box, {
x: this.box.position.x 4,
duration: 1,
onComplete: ()=>{this.prevent = false}
}
}
});
這行得通，確保如果你有內部 if 陳述句，你用布林值包裝整個東西，而不僅僅是按鍵的東西。基本上，有一個布林值是假的，如果它是假的，則觸發事件并在事件中將其設定為真，因此如果用戶按住一個鍵，它將不會通過 if 陳述句并再次觸發。只有當 GSAP 自己完成時，if 陳述句才會再次通過。
uj5u.com熱心網友回復：
這應該有效：
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.log("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()方法已經好一點了。
uj5u.com熱心網友回復：
我從來沒有用過 GSAP，但你能試試這樣的東西嗎？
this.box.finalPosition = this.box.position.x
window.addEventListener('keydown', ()=>{
this.box.finalPosition = this.box.finalPosition 4
GSAP.to(this.box, {
x: this.box.finalPosition,
duration: 1,
}
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/474454.html
標籤：javascript 事件 dom 事件 gsap