Merge pull request #46 from oumoussa98/fix-observer

fix: fixed mulitple components on the same page

Author: oumoussa98

src/components/InfiniteLoading.vue

@@ -4,7 +4,6 @@ import { onMounted, ref, toRefs, onUnmounted, watch, nextTick } from "vue";
 
 import {
   startObserver,
-  stopObserver,
   stateHandler,
   initEmitter,
   isVisible,
@@ -20,6 +19,7 @@ const props = defineProps({
   slots: { type: Object, required: false },
 });
 
+let observer = null;
 const infiniteLoading = ref(null);
 const state = ref("ready");
 const { top, firstload, target, distance } = props;
@@ -44,24 +44,24 @@ const stateWatcher = () =>
       parentEl.scrollTop = parentEl.scrollHeight - prevHeight;
     if (newVal == "loaded" && isVisible(infiniteLoading.value, params.parentEl))
       params.emit();
-    if (newVal == "complete") stopObserver();
+    if (newVal == "complete") observer.disconnect();
   });
 
 const identifierWatcher = () =>
   watch(identifier, () => {
     state.value = "ready";
-    stopObserver();
-    startObserver(params);
+    observer.disconnect();
+    observer = startObserver(params);
   });
 
 onMounted(() => {
-  startObserver(params);
+  observer = startObserver(params);
   stateWatcher();
   if (identifier) identifierWatcher();
 });
 
 onUnmounted(() => {
-  stopObserver();
+  observer.disconnect();
 });
 </script>
 

src/utils.js

@@ -27,12 +27,11 @@ const isVisible = (el, view) => {
   return elRect.top >= viewRect.top && elRect.bottom <= viewRect.bottom;
 };
 
-let observer;
 const startObserver = params => {
   params.parentEl = document.querySelector(params.target) || null;
   let rootMargin = `0px 0px ${params.distance}px 0px`;
   if (params.top) rootMargin = `${params.distance}px 0px 0px 0px`;
-  observer = new IntersectionObserver(
+  const observer = new IntersectionObserver(
     entries => {
       const entry = entries[0];
       if (entry.isIntersecting) {
@@ -43,10 +42,7 @@ const startObserver = params => {
     { root: params.parentEl, rootMargin }
   );
   observer.observe(params.infiniteLoading.value);
+  return observer;
 };
 
-const stopObserver = () => {
-  observer.disconnect();
-};
-
-export { startObserver, stopObserver, stateHandler, initEmitter, isVisible };
+export { startObserver, stateHandler, initEmitter, isVisible };