作为标题状态，我想避免函数内存泄漏，但我很困惑如何实现这一点。目前，在我的过程中，我在table td中进行了一个无限循环，但我刚刚实现了它，如果我只使用它，它可以添加一个无限的<td></td>，我想避免它，我试图使这样的伪代码实现我想要的：
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
但我对如何做到这一点感到困惑。这是我实现它的javascript代码：
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);
}
对于那些可能认为这是重复的人，作为参考，我已经在这里尝试了几个主题，但仍然未能实现：
如何进行stroy-javascript-object
如何使用jquery删除除第一个div之外的克隆元素div
移动和克隆a-dom-element-in-javascript
克隆删除输入字段保持元素id唯一
有人能帮我解决这个问题吗？
你可以试试这样的东西：
function removeCells() {
const container = document.querySelector('tr');
const cells = document.querySelectorAll('td');
for (let i = 0; i < 6; i++) {
container.removeChild(cells[i])
}
}<table>
<tbody>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</tbody>
</table>
<button onclick="removeCells()">Remove Cells</button>只需添加一个条件，该条件检查cells的计数，并在达到某个数字时触发removeCells()。
编辑
我对您的代码做了一些更改，并阻止了无限循环。
我已经将setInterval更改为递归setTimeout，将multiplier和imgScaller移动为data属性，在函数的开头添加了节点移除，并对前三个td进行了硬编码，因为我找不到7指的是什么：
new Vue({
el: "#app",
data() {
return {
totalItems: 9,
currentPosition: 0,
maxPosition: 0,
intervalStatus: true,
multiplier: 0,
imgScaller: 0
};
},
methods: {
itemSlider() {
let autoScroller = document.getElementById("customWrapper");
let item = autoScroller.getElementsByTagName("td");
if (item.length === 6) {
this.multiplier = 0;
this.imgScaller = 0;
console.log("Let's Remove it");
autoScroller.removeChild(autoScroller.children[0])
autoScroller.removeChild(autoScroller.children[1])
autoScroller.removeChild(autoScroller.children[2])
}
if (item[this.imgScaller].classList !== undefined) {
this.currentPosition = -1 * item[this.imgScaller].offsetWidth * this.multiplier;
autoScroller.style.transform = `translateX(${this.currentPosition}px)`;
autoScroller.style.transition = `0.5s`;
}
if (this.imgScaller - 1 !== -1 && this.imgScaller !== 0) {
let firstSlide = item[this.imgScaller - 1];
let cloneFirst = firstSlide.cloneNode(true);
autoScroller.appendChild(cloneFirst);
}
if (this.imgScaller) {
item[this.imgScaller + 1].classList.add("active");
}
if (this.imgScaller - 1 !== -1) {
item[this.imgScaller].classList.remove("active");
item[this.imgScaller - 1].classList.remove("active");
}
this.multiplier++;
this.imgScaller++;
console.log("Cek multipler : ", this.multiplier);
setTimeout(this.itemSlider, 3000);
},
},
mounted() {
this.itemSlider();
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="merchandise-item-wrapper">
<table class="merchandise-table">
<tr id="customWrapper">
<td class="item-store">
<div>
<div class="portfolio-img bg-white position-relative text-center overflow-hidden">
<img class="merchandise-img" src="https://via.placeholder.com/300x300">
</div>
<div style="padding-top: 3vh;">
<div class="portfolio-hover-main text-center">
<div class="portfolio-hover-box align-middle">
<div class="portfolio-hover-content position-relative">
<div class="row text-left">
<div class="col-10 col-md-11 col-lg-4">
<p class="merchandise-category">Kode Pesanan</p>
</div>
<div class="col-2 col-md-1 col-lg-1">
<p class="merchandise-category">:</p>
</div>
<div class="col-12 col-md-12 col-lg-7">
<p class="merchandise-code">Putih (TS - {{multiplier}})</p>
</div>
</div>
<div class="row text-left">
<div class="col-10 col-md-11 col-lg-4">
<p class="merchandise-category">Deskripsi</p>
</div>
<div class="col-2 col-md-1 col-lg-1">
<p class="merchandise-category">:</p>
</div>
<div class="col-12 col-md-12 col-lg-7">
<p class="merchandise-text number-of-lines-3">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum, porro! Illo facere soluta molestiae repellat odio porro id est tenetur nesciunt, ea, similique consequuntur? Voluptate dolorum explicabo quo quaerat deserunt?
</p>
</div>
</div>
<div class="row text-left">
<div class="col-10 col-md-11 col-lg-4">
<p class="merchandise-category">Harga</p>
</div>
<div class="col-2 col-md-1 col-lg-1">
<p class="merchandise-category">:</p>
</div>
<div class="col-12 col-md-12 col-lg-7">
<p class="merchandise-price">Rp 80.000</p>
</div>
</div>
<div class="row text-left">
<div class="col-10 col-md-11 col-lg-4">
<p class="merchandise-category">Ukuran</p>
</div>
<div class="col-2 col-md-1 col-lg-1">
<p class="merchandise-category">:</p>
</div>
<div class="col-12 col-md-12 col-lg-7">
<p class="merchandise-size">XS - XXL</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="item-store">
<div>
<div class="portfolio-img bg-white position-relative text-center overflow-hidden">
<img class="merchandise-img" src="https://via.placeholder.com/300x300">
</div>
<div style="padding-top: 3vh;">
<div class="portfolio-hover-main text-center">
<div class="portfolio-hover-box align-middle">
<div class="portfolio-hover-content position-relative">
<div class="row text-left">
<div class="col-10 col-md-11 col-lg-4">
<p class="merchandise-category">Kode Pesanan</p>
</div>
<div class="col-2 col-md-1 col-lg-1">
<p class="merchandise-category">:</p>
</div>
<div class="col-12 col-md-12 col-lg-7">
<p class="merchandise-code">Putih (TS - {{multiplier}})</p>
</div>
</div>
<div class="row text-left">
<div class="col-10 col-md-11 col-lg-4">
<p class="merchandise-category">Deskripsi</p>
</div>
<div class="col-2 col-md-1 col-lg-1">
<p class="merchandise-category">:</p>
</div>
<div class="col-12 col-md-12 col-lg-7">
<p class="merchandise-text number-of-lines-3">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum, porro! Illo facere soluta molestiae repellat odio porro id est tenetur nesciunt, ea, similique consequuntur? Voluptate dolorum explicabo quo quaerat deserunt?
</p>
</div>
</div>
<div class="row text-left">
<div class="col-10 col-md-11 col-lg-4">
<p class="merchandise-category">Harga</p>
</div>
<div class="col-2 col-md-1 col-lg-1">
<p class="merchandise-category">:</p>
</div>
<div class="col-12 col-md-12 col-lg-7">
<p class="merchandise-price">Rp 80.000</p>
</div>
</div>
<div class="row text-left">
<div class="col-10 col-md-11 col-lg-4">
<p class="merchandise-category">Ukuran</p>
</div>
<div class="col-2 col-md-1 col-lg-1">
<p class="merchandise-category">:</p>
</div>
<div class="col-12 col-md-12 col-lg-7">
<p class="merchandise-size">XS - XXL</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="item-store">
<div>
<div class="portfolio-img bg-white position-relative text-center overflow-hidden">
<img class="merchandise-img" src="https://via.placeholder.com/300x300">
</div>
<div style="padding-top: 3vh;">
<div class="portfolio-hover-main text-center">
<div class="portfolio-hover-box align-middle">
<div class="portfolio-hover-content position-relative">
<div class="row text-left">
<div class="col-10 col-md-11 col-lg-4">
<p class="merchandise-category">Kode Pesanan</p>
</div>
<div class="col-2 col-md-1 col-lg-1">
<p class="merchandise-category">:</p>
</div>
<div class="col-12 col-md-12 col-lg-7">
<p class="merchandise-code">Putih (TS - {{multiplier}})</p>
</div>
</div>
<div class="row text-left">
<div class="col-10 col-md-11 col-lg-4">
<p class="merchandise-category">Deskripsi</p>
</div>
<div class="col-2 col-md-1 col-lg-1">
<p class="merchandise-category">:</p>
</div>
<div class="col-12 col-md-12 col-lg-7">
<p class="merchandise-text number-of-lines-3">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum, porro! Illo facere soluta molestiae repellat odio porro id est tenetur nesciunt, ea, similique consequuntur? Voluptate dolorum explicabo quo quaerat deserunt?
</p>
</div>
</div>
<div class="row text-left">
<div class="col-10 col-md-11 col-lg-4">
<p class="merchandise-category">Harga</p>
</div>
<div class="col-2 col-md-1 col-lg-1">
<p class="merchandise-category">:</p>
</div>
<div class="col-12 col-md-12 col-lg-7">
<p class="merchandise-price">Rp 80.000</p>
</div>
</div>
<div class="row text-left">
<div class="col-10 col-md-11 col-lg-4">
<p class="merchandise-category">Ukuran</p>
</div>
<div class="col-2 col-md-1 col-lg-1">
<p class="merchandise-category">:</p>
</div>
<div class="col-12 col-md-12 col-lg-7">
<p class="merchandise-size">XS - XXL</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>