如何在 Vue.js 中使用 javascript 避免克隆節點中的 memory 泄漏

Question

作為標題 state，我想避免 function 中的 memory 泄漏，但我對如何實現這一點感到非常困惑。 目前，在我的進展中，我在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);
    }

對於可能認為這是重復的您，作為參考，我已經在這里嘗試了幾個主題，但仍然未能實現它：

1. 如何銷毀 javascript 對象

2. 如何刪除克隆元素 div 除了第一個 div 使用 jquery

3. 在 javascript 中刪除和克隆一個 dom 元素

4. 克隆刪除輸入字段保持元素 ID 唯一

有人可以幫我解決這個問題嗎？

Answer 1

你可以嘗試這樣的事情：

 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屬性，將節點刪除添加到 function 的開頭，並對前三個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>