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

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

我想向元素1追加一个div，等待1秒，从元素1中删除追加的div，然后向元素2追加一个div，依此类推

seqIDs

下面是我的代码，但我不知道如何删除前面附加的元素或如何将循环延迟1秒。我使用的是香草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);
}

for（变量i=0，len=seqIDs.length；i

您可以使用

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();
})();

---

要创建一个可随时启动或停止的系统，可以执行以下操作：

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（永远）{
var-cntr=0；
var lastItem；
函数next（）{
如果（最后一项）{
lastItem.parentNode.removeChild（lastItem）；
lastItem=null；
}
如果（永远&&cntr>=seqIDs.length）{
//归零
cntr=0；
}
如果（cntr<序列长度）{
var newDiv=document.createElement（“div”）；
document.getElementById（seqIDs[cntr++]）.appendChild（newDiv）；
lastItem=newDiv；
this.timer=setTimeout（下一步，1000）；
}
}
this.stop=函数（）{
clearTimeout（this.timer）；
this.timer=null；
}
this.start=函数（）{
如果（！this.timer）{
next（）；
}
}
}
var cycler=新的cycleDiv（真）；
cycler.start（）；
//过了一段时间
循环器停止（）；

---

而且，保持每秒创建和删除一个新的div元素有点低效。我不知道您对这个div的内容做了什么（因为代码中没有任何内容），但是您可以只使用一个div，从一个父级移动到下一个父级，而不是不断创建新的div元素。

给插入的节点一个ID，在重新创建和插入节点之前，请删除该节点。我的问题似乎是延迟了插入。使用上面的代码，我的所有元素一次被插入。好吧，循环不会等待超时。@totalitarian-当然，它们会一次被插入

setTimeout

无法以这种方式工作。可能会重复伟大的东西！工作完美。你知道如何让它无限期地循环序列吗？当它到达

seqID

数组的末尾时，你希望它做什么？重复一遍？好的。如果这可以由一个bool设置就好了too@totalitarian-在我的答案末尾添加了一个“永远循环”选项。再次感谢！如果可能，最后一个请求。是否可以创建一个方法来停止循环，例如，在单击按钮之后？

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();