SSENSE/vue-carousel

Bug: Missing cleanup of resize listener

Open

#385 geöffnet am 11. März 2019

Auf GitHub ansehen
 (4 Kommentare) (1 Reaktion) (0 zugewiesene Personen)JavaScript (1.705 Stars) (513 Forks)batch import
buggood first issue

Beschreibung

Bug Report

Currently in the mounted() hook of Carousel.vue, an event listener is attached to window,

  window.addEventListener(
    "resize",
    debounce(this.onResize, this.refreshRate)
  );

But there is no equivalent removeEventListener call in the beforeDestroy() hook.

  beforeDestroy() {
    this.detachMutationObserver();
    window.removeEventListener("resize", this.getBrowserWidth);
    this.$refs["VueCarousel-inner"].removeEventListener(
      this.transitionstart,
      this.handleTransitionStart
    );
    this.$refs["VueCarousel-inner"].removeEventListener(
      this.transitionend,
      this.handleTransitionEnd
    );
    this.$refs["VueCarousel-wrapper"].removeEventListener(
      this.isTouch ? "touchstart" : "mousedown",
      this.onStart
    );
  }

This results in a buildup of listeners on the window object when a page is navigated to and away from multiple times via routing.

Contributor Guide

Tech Stack
vuejavascripthtmlcss
Domain
frontend
Issue Type
bug
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
2
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
under 1 hour
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
stale
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
clear
Voraussetzungen
Basic Vue.jsEvent listener cleanupLifecycle hooks
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
85
Research-Richtung
The bug is in Carousel.vue. In the mounted() hook, a resize listener is added via window.addEventListener. In the beforeDestroy() hook, add the corresponding window.removeEventListener for the same function reference (debounce(this.onResize, this.refreshRate)). Ensure that the debounced function is stored or referenced correctly to avoid mismatches. No linked PRs or comments provide a fix, so the solution is straightforward.