How to properly update JS after editing a section in Customizer

[Rostislav333]

I have a Shopify section with a SplideJS slider. The problem was a buggy update of the slider in the customizer. I found a way to update correctly in the customizer and the method works. But the problem is that I am duplicating the code for this. Is there any other way to avoid this? Maybe I'm doing it wrong

document.addEventListener('DOMContentLoaded', () => {
    const rlHotspotSlider = new Splide('.rl-hotspot-slider', {
      pagination: false,
      gap: 1,
      drag: false,
      perPage: 6,
      perMove: 1,
    });
    rlHotspotSlider.mount();

    if (Shopify.designMode) {
      document.addEventListener('shopify:section:load', function(event) {
        const rlHotspotSlider = new Splide('.rl-hotspot-slider', {
          pagination: false,
          gap: 1,
          drag: false,
          perPage: 6,
          perMove: 1,
        });
        rlHotspotSlider.mount();
      });
    }
  });

[shoppie-user-12]

@Rostislav333 Thanks for this solution, I was having the same issue. Regarding your question I just created a function out of it:

document.addEventListener( 'DOMContentLoaded', function() {
    initSplide();

    if (Shopify.designMode) {
      document.addEventListener('shopify:section:load', function(event) {
        initSplide();
      });
    }
});

function initSplide() {
  const splides = document.querySelectorAll('.splide');
  // do your initialisation here
}