首頁猿問在 2020...

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

JavaScript

縹緲止盈 2023-05-19 15:13:26

我有連續的動畫，用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);});

查看完整描述

1 回答

四季花海

TA貢獻1811條經驗獲得超5個贊

您目前正在為每次更新向瀏覽器添加一個新事件。一個簡單的解決方案如下：

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);

});

反對回復 2023-05-19

1 回答
0 關注
122 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

在 2020 年，我是否需要在第二次初始化時調用“removeEventListener”？

在 2020 年，我是否需要在第二次初始化時調用“removeEventListener”？

1 回答

添加回答

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

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