第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會有你想問的

在 2020 年,我是否需要在第二次初始化時(shí)調(diào)用“removeEventListener”?

在 2020 年,我是否需要在第二次初始化時(shí)調(diào)用“removeEventListener”?

縹緲止盈 2023-05-19 15:13:26
我有連續(xù)的動畫,用gsap library制作。我正在使用mouseover/mouseout事件來暫停/恢復(fù)此動畫。在窗口調(diào)整大小事件中,我正在重新初始化。我的問題是:我需要調(diào)用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貢獻(xiàn)1811條經(jīng)驗(yàn) 獲得超5個(gè)贊

您目前正在為每次更新向?yàn)g覽器添加一個(gè)新事件。一個(gè)簡單的解決方案如下:


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 () { /* .. */ }

}

由于您沒有實(shí)例化滾動對象,因此必須更改全局引用 scroll.eventsAlreadyAdded。


或者,您可以稍微重寫代碼,以便處理實(shí)例化變量(未測試):



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

});



查看完整回答
反對 回復(fù) 2023-05-19
  • 1 回答
  • 0 關(guān)注
  • 129 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號