JavaScript中创建元素后定时清除，解决页面过载问题

我创建的div元素导致页面过载，请问是否有办法在一段时间后清除/销毁已创建的元素？以下是相关代码：

var ct = 0;
let max = 180;
let min = -180;
var xMrgn = 0;
var yMrgn = "440px";
function startCounter() {
    if (ct < 50) {
        var bbls = document.querySelector('.bbls-amount').value;
        var bblSpeed = document.querySelector('.bbls-speed').value;
        document.getElementById('bblsQty').innerHTML = bbls
        var b = Math.floor(Math.random() * (bbls - 3 + 1) + 3);
        for (let i = 0; i < b; i++) {
            var a = Math.floor(Math.random() * (max - min + 1) + min);
            xMrgn = a + "px";
            let div = document.createElement('div');
            div.className = 'bubbles';
            dv.appendChild(div);
            var msxS = bblSpeed * 14;
            var minS = bblSpeed * 6;
            var s = Math.floor(Math.random() * (msxS - minS + 1) + minS);
            $(".bubbles").animate({
                "marginLeft": xMrgn, 
                "bottom": yMrgn
            }, s);
        }
    }
    document.getElementById('txt').innerHTML =  ct;
    var counter = setTimeout(startCounter, 1000);
    ct = (ct < 50) ? ct + 1 : 0;
}
startCounter()

解决方法 #

你的代码现在有两个核心问题导致页面过载：一是每次动画都会选中所有已创建的气泡重复执行，二是从未清理过创建的div元素，它们会持续堆积在DOM中占用内存。可以通过以下方式优化：

1. 动画结束后立即销毁单个气泡

修改循环内的代码，只对刚创建的div执行动画，动画完成后直接移除元素：

for (let i = 0; i < b; i++) {
    var a = Math.floor(Math.random() * (max - min + 1) + min);
    xMrgn = a + "px";
    let div = document.createElement('div');
    div.className = 'bubbles';
    dv.appendChild(div);
    var msxS = bblSpeed * 14;
    var minS = bblSpeed * 6;
    var s = Math.floor(Math.random() * (msxS - minS + 1) + minS);
    // 仅针对当前创建的气泡执行动画
    $(div).animate({
        "marginLeft": xMrgn, 
        "bottom": yMrgn
    }, s, function() {
        // 动画完成后销毁当前元素
        $(this).remove();
    });
}

2. 固定时间后强制销毁元素

如果不需要等动画结束，想在固定时长后清理元素，可以添加独立的超时销毁逻辑：

for (let i = 0; i < b; i++) {
    var a = Math.floor(Math.random() * (max - min + 1) + min);
    xMrgn = a + "px";
    let div = document.createElement('div');
    div.className = 'bubbles';
    dv.appendChild(div);
    var msxS = bblSpeed * 14;
    var minS = bblSpeed * 6;
    var s = Math.floor(Math.random() * (msxS - minS + 1) + minS);
    $(div).animate({
        "marginLeft": xMrgn, 
        "bottom": yMrgn
    }, s);
    
    // 比动画最长时间多留100ms缓冲，到点销毁元素
    setTimeout(() => {
        if (div.parentNode) {
            div.remove();
        }
    }, s + 100);
}

3. 清理定时器避免无限循环

当前代码每次调用startCounter都会创建新的定时器，旧定时器无法被清理。可以把定时器变量改成全局的，在循环结束时清理：

var counter; // 全局存储定时器引用
function startCounter() {
    if (ct < 50) {
        // ... 原有逻辑 ...
    }
    document.getElementById('txt').innerHTML =  ct;
    if (ct < 50) {
        counter = setTimeout(startCounter, 1000);
    } else {
        clearTimeout(counter); // 重置时清理定时器
    }
    ct = (ct < 50) ? ct + 1 : 0;
}

通过以上修改，就能避免DOM元素无限堆积，解决页面过载问题。

内容的提问来源于stack exchange，提问作者ymton emanlaer