Question

我有一个元素ID列表，例如1,2,3 ......

我想将div添加到元素1，等待1秒，从元素1中删除附加的div，然后将div添加到元素2，依此类推seqIDs

中列出的每个元素

下面是我的代码，但我无法弄清楚如何删除前一个附加元素或如何将循环延迟1秒。我正在使用vanilla javascript，所以请不要jQuery回答

for (var i = 0, len = seqIDs.length; i < len; i++) {
    var newDiv = document.createElement('div');
    document.getElementById(seqIDs[i]).appendChild(newDiv);
    setTimeout(this.reset, 1000);
}

Answer 1

你可以使用setTimeout()遍历序列，删除一个并在每个定时器调用中添加另一个，直到你到达数组的末尾：

(function() {
    var cntr = 0;
    var lastItem;

    function next() {
        if (lastItem) {
            lastItem.parentNode.removeChild(lastItem);
            lastItem = null;
        }
        if (cntr < seqIDs.length) {
            var newDiv = document.createElement("div");
            document.getElementById(seqIDs[cntr++]).appendChild(newDiv);
            lastItem = newDiv;
            setTimeout(next, 1000);
        }
    }
    next();
})();

如果你想让它一遍又一遍地重复，你可以将它放在一个函数中，该函数接受是否重复自身的参数，然后将cntr包回0：

function cycleDiv(forever) {
    var cntr = 0;
    var lastItem;

    function next() {
        if (lastItem) {
            lastItem.parentNode.removeChild(lastItem);
            lastItem = null;
        }
        if (forever && cntr >= seqIDs.length) {
            // wrap back to zero
            cntr = 0;
        }
        if (cntr < seqIDs.length) {
            var newDiv = document.createElement("div");
            document.getElementById(seqIDs[cntr++]).appendChild(newDiv);
            lastItem = newDiv;
            setTimeout(next, 1000);
        }
    }
    next();
}

cycleDiv(true);

要制作一个可以随时开始或停止的，你可以这样做：

function cycleDiv(forever) {
    var cntr = 0;
    var lastItem;

    function next() {
        if (lastItem) {
            lastItem.parentNode.removeChild(lastItem);
            lastItem = null;
        }
        if (forever && cntr >= seqIDs.length) {
            // wrap back to zero
            cntr = 0;
        }
        if (cntr < seqIDs.length) {
            var newDiv = document.createElement("div");
            document.getElementById(seqIDs[cntr++]).appendChild(newDiv);
            lastItem = newDiv;
            this.timer = setTimeout(next, 1000);
        }
    }

    this.stop = function() {
        clearTimeout(this.timer);
        this.timer = null;
    }

    this.start = function() {
        if (!this.timer) {
            next();
        }
    }
}


var cycler = new cycleDiv(true);
cycler.start();

// then some time later
cycler.stop();

此外，每秒继续创建和删除新的div元素效率有点低。我不知道你对这个div的内容做了什么（因为这段代码中没有任何内容），但是你可以只有一个div，你从一个父母移动到接下来而不是不断地制作新的div元素。

如何创建元素并在1秒间隔后删除最后添加的元素？

1 个答案: