As the title state, I want to avoid a memory leak from my function, but I got quite confused as to how can I achieve this. currently, in my progress, I make an infinite loop in table td but I just realized it, If I using only this, it can add an infinite <td></td> and I want to avoid it, I try to make a Pseudo Code like this achieve what I want:
1. Add An Original Item to a temporary variable
2. Assign it and then destroy the earliest one, so it can only loop in index [1,2,3] where
-- index 1 = is a prev
-- index 2 = is what we see
-- index 3 = is a next
3. every cloned aside from this 3 index
but I got confused as how to achieve this. this is my javascript code to achieve it:
itemSlider() {
let autoScroller = document.getElementById("customWrapper");
let item = autoScroller.getElementsByTagName("td");
let originalLength = item.length;
let multiplier = 0;
let imgScaller = 0;
let index = 0;
let temp = [];
setInterval(function() {
if (item[imgScaller + 1].classList != undefined) {
autoScroller.style.transform = `translateX(${-380 * multiplier}px)`;
}
if (imgScaller - 1 != -1 && imgScaller != 0) {
let firstSlide = item[imgScaller - 1];
let cloneFirst = firstSlide.cloneNode(true);
autoScroller.appendChild(cloneFirst);
}
if (imgScaller) {
item[imgScaller + 1].classList.add("active");
}
if (imgScaller - 1 != -1) {
item[imgScaller].classList.remove("active");
item[imgScaller - 1].classList.remove("active");
}
multiplier++;
imgScaller++;
console.log("Cek before : ", multiplier);
console.log("Cek original length : ", originalLength);
if (multiplier % originalLength == 0) {
// I just wondering maybe I can input the logic after check it with modulo in here
// But it seems I got confused as how to achieve it
autoScroller.remove();
}
}, 3000);
}
for you who maybe thinks this is a duplicate, for reference, I already try several topic in here, but still failed to implement it:
can someone help me to solve this?
