如何在 Vue.js 中使用 javascript 避免来自 cloneNode 的内存泄漏

Question

作为标题状态，我想避免我的函数发生内存泄漏，但我对如何实现这一点感到很困惑。目前，在我的进展中，我在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. how-to-destroy-a-javascript-object

2. how-to-remove-cloned-element-div-except-first-div-using-jquery

3. removing-and-cloning-a-dom-element-in-javascript

4. cloning-removing-input-fields-keeping-element-id-unique

有人可以帮我解决这个问题吗？

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 属性，将节点删除添加到函数的开头并硬编码前三个@ 987654331@s 因为我找不到 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>