在 2020 年，我是否需要在第二次初始化时调用“removeEventListener”？

Question

我有连续的动画，用gsap library制作。我正在使用mouseover/mouseout事件来暂停/恢复此动画。在窗口调整大小事件中，我正在重新初始化。我的问题是：我需要调用removeEventListener第二次初始化吗？这是代码/场景：const scroll = {    create: function (el) {        this.scrollAnimation = gsap.timeline({            repeat: -1        });        // another piece of awesome code here...        this.create__addMouseEvents(el);    },    create__addMouseEvents: function (el) {        // here, on window resize event( when i call update(), during re-initialization ), do i need to call "removeEventListener"?        el.addEventListener('mouseover', () => this.scrollAnimation.pause());        el.addEventListener('mouseout', () => this.scrollAnimation.resume());    },    update: function () {        //         // destroy old "scrollAnimation" if it's already exists        if (this.scrollAnimation) {            this.scrollAnimation.kill();        }        //         // reinit        this.init();    },    init: function () {                // some awesome code here...        this.create(el);    }}document.addEventListener('DOMContentLoaded', function () {        scroll.init();});let windowResizeTimer;window.addEventListener('resize', function () {        clearTimeout(windowResizeTimer);        windowResizeTimer = setTimeout(function () {                scroll.update();    }, 150);});

Answer 1

您目前正在为每次更新向浏览器添加一个新事件。一个简单的解决方案如下：

const scroll = {

  eventsAlreadyAdded: false,

  create: function (el) {

    this.scrollAnimation = gsap.timeline({ repeat: -1 });

    // another piece of awesome code here...

    if (!scroll.eventsAlreadyAdded) {

      this.create__addMouseEvents(el);

      scroll.eventsAlreadyAdded = true;

    }

  },

  create__addMouseEvents: function (el) { /* .. */ },

  update: function () { /* .. */ },

  init: function () { /* .. */ }

}

由于您没有实例化滚动对象，因此必须更改全局引用 scroll.eventsAlreadyAdded。

或者，您可以稍微重写代码，以便处理实例化变量（未测试）：

class Scroll {

  /**

   * Returns the element

   * @type {Node}

   */

  static get element() {

    return document.querySelector('THE ELEMET SELECTOR');

  }

  /**

   * Initial the scroll event to given element

   * @param {Node} el the element that will get an animation

   */

  constructor(el) {

    this.el = el;

    /**

     * Remembers whether the events have already been attached to the element

     * @type {boolean}

     */

    this.eventsAlreadyAdded = false;

    /**

     * The timeline instanze from gsap

     * @type {Timeline}

     */

    this.scrollAnimation = null;

    this.create();

  }

  create() {

    this.scrollAnimation = gsap.timeline({

      repeat: -1

    });

    // another piece of awesome code here...

    this.addMouseEvents();

  }

  addMouseEvents() {

    if (this.eventsAlreadyAdded) return;

    this.el.addEventListener('mouseover', () => this.scrollAnimation.pause());

    this.el.addEventListener('mouseout', () => this.scrollAnimation.resume());

    this.eventsAlreadyAdded = true;

  }

  update() {

    if (this.scrollAnimation) {

      this.scrollAnimation.kill();

    }

    this.create();

  }

}

let scroll = null;

let windowResizeTimer = null;

document.addEventListener('DOMContentLoaded', () => {

  scroll = new Scroll(Scroll.element)

});

window.addEventListener('resize', () => {

  if (!scroll) return;

  if (windowResizeTimer) clearTimeout(windowResizeTimer);

  windowResizeTimer = setTimeout(() => { scroll.update(); }, 150);

});