JavaScript Undesirable throttle point resulting from my Javascript, but the reason for it is the mystery … !???

[Alaskatron]

<initial>
... Main Site (sandbox) —> https://richnutcoffee.net/basic4/cStore.php
… JS direct —> https://richnutcoffee.net/basic4/cStore.js .
… Specific in ‘ cStore.js ‘ file … lines 21-49 —> function rotateCarousel() <— .
</initial>

I have written code that I am lacking a deeper understanding. It’s inner workings and hidden mechanisms, I believe, are my trouble. I can give a hunch to where my trouble resides in the javascript file of my web design. But first, operationally, you can observe the issue occurring after the 9th selection of the displayed vertical 9 tiles on the Right side of the page; select in order, 1 through 9, and allow rendering(carousel turning) between selections. When complete, all movement and counting observed should have been normal and no abnormalities should have displayed. Now, continuing and returning to the top (9 + n) repeating the selection process in the order described above, begins our glitching trouble … selection (9 + 1) causes an easily unnoticed glitch, selection (9 + 2) causes a noticeable delay, selection (9 + 3) causes an unreasonable time gap, and anything beyond is total waste.

I began thinking and researching any ideas for resolution coming to no solid conclusion and gathering information nearly related to my trouble. Due to not being formally trained as a computer coder, most of my work pushes limits due to the experimental nature of my approach. Of previous ‘experiments’, I have found solutions, but this one is beyond my education. I believe the answer lies in how Javascript (in general) is being stored in memory ( as Javascript does! ) and the issues I am displaying for you here, are specific results from observed actions categorized from action batch (9 + n). Observation will be the greatest descriptor of my trouble, if the written material here has not fully illuminated you.

What I need from this? I need to have a rotating carousel uninhibited by some javascript residue that has a finalizing property that ultimately forces browser crash!!!

Thank you for reading. I invite you to my site to observe my work.

 

[Zakwan@MTH]

you should try inspecting rotatecarousel and check if theres creation of timers repeatedly and also make sure that closures in rotatecarousel are not unintentionally retained

 

[Alaskatron]

you should try inspecting rotatecarousel and check if theres creation of timers repeatedly and also make sure that closures in rotatecarousel are not unintentionally retained

@Zakwan@MTH … Thank you. That is helpful. I tinkered more on it and found that using combinations of JS classList.add and classList.remove, rather than setProperty or setAttribute, are exactly what I expect in functionality. Using setProperty and setAttribute seem to leave memory artifacts (closures) that ‘gum up’ future flow of operations in my experience with this. Thank you again for your direction! Very helpful.

 

[Tyrsson]

You also have some serious issues when hovering over the different items in that presentation. Only certain items behave as expected. There is a lot of jumping (best way I can describe it).

 

[Alaskatron]

@Tyrsson …Yes. I observed the same. I made adjustments I noted above and have resolved the trouble. I have made change to the link. Thank you again.