search

dynamicweb / swiffy-slider

Super fast carousel and slider with touch for optimized websites running in modern browsers.
MIT License
250 stars 29 forks source link

Destory method missing #4

Closed johannesdz closed 2 years ago

johannesdz commented 2 years ago

Describe the bug We are planing to use this slider on our SPA, but therefore we need a destroy() method, that is taking care of clean up and unbinding from all the event. Are you planing to implement that?

nicped commented 2 years ago

Thank you for considering Swiffy Slider. A destroy or similar can be implemented if needed. First I need to understand what you are looking for - I am not an expert in this particular area, but is eager to understand!

As I see it, Swiffy Slider is markup with event listeners coming from the swiffyslider.init(). The js is not a class or object instance itself that needs to be destroyed.

If you remove the slider markup from the DOM, all the event listeners will unbind because of the browser garbage collector - if you create the markup as a HtmlElement in JS, just set the variable that holds that element to null and all event listeners will be removed from memory (except in IE).

If you need to keep the markup, you can clone the slider element using replaceWith and in that way remove all eventlisteners. var slider = document.getElementById("slider1"); slider.replaceWith(slider.cloneNode(true));

But as I said, I am probably missing some knowledge in this area. Feel free to provide a link to some insights in this area, and I will dig into it right away!

Also - what framework are you using? React, Vue, something else?

johannesdz commented 2 years ago

Thank you for your fast reply! To be honest, i am also not an expert in this field;-) And you are probably right, it looks like browsers nowadays should be smart enough: https://stackoverflow.com/questions/26442041/is-element-removeeventlistener-required-before-element-parentnode-removechild It's just a functionality i know from other carousel libraries/sliders. I am using it in a Vue project - let my play a little with it, maybe its not needed at all. I'll let you know when i have some news on this.

nicped commented 2 years ago

Thanks for getting back.

Other carousel libraries uses a very different approach to sliding and most I have been looking at are javascript object instances that creates htmlElements in javascript for the slides, indicators, navigation etc. Objects like that definitely needs to be destroyed to avoid memory leaks because of the htmlElements created inside the object.

Swiffy slider script does not create any html elements effectively avoiding that particular issue since it is the markup and browser that takes care of that.

I will close the subject for now - if you run into any issues, just reach out.

Thanks, Nicolai