添加並立即刪除事件偵聽器的目的是什麼？

我遇到以下on github，它構成了一個專門用於管理抽屜式側面導航行爲的類的一部分。添加並立即刪除事件偵聽器的目的是什麼？

closeSideNav() { 
    this.sideNav.classList.remove('side-nav--visible'); 
    this.sideNavContent.classList.add('side-nav__content--animatable'); 
    this.sideNavContent.style.transform = 'translateX(-102%)'; 

    let onSideNavClose =() => { 
     this.sideNav.removeEventListener('transitionend', onSideNavClose); 
    } 
    this.sideNav.addEventListener('transitionend', onSideNavClose); 
}

功能的前三行不需要解釋，但我有點最後三個混淆。起初，我認爲transitionend事件監聽器被添加，然後立即刪除 - 也許發信給另一個代碼在這裏沒有顯示 - 但現在我真的不習慣這種模式。

這些線的目的是什麼？

來源

2017-09-16 verism

它是不是立即刪除。它在觸發一次後被刪除。這是一次性UI操作的常見模式，例如導航只能關閉一次，第二次按下按鈕沒有任何意義，並且可能會混淆正在運行的動畫等。

來源

2017-09-16 12:14:38

好吧，我明白了 - 所以一旦css動畫結束，就會刪除偵聽器。但據我所知（無可置疑地不正確），一旦轉換完成，所發生的一切就是刪除最近應用的監聽器。我知道動畫需要一定程度的管理，但我沒有看到這段代碼實際上有什麼幫助。 – verism

@verism它可能與'onSideNavClose'內部發生的事情有很大關係。 – Pointy

@Pointy在'closeSideNav'函數內部是不是'onSideNavClose'？ – verism

添加並立即刪除事件偵聽器的目的是什麼？

回答

相關問題