如何重新循环 setInterval/setTimeout 函数答案

【问题标题】：How to re-loop a setInterval/setTimeout function如何重新循环 setInterval/setTimeout 函数
【发布时间】：2013-12-28 06:57:14
【问题描述】：

我正在尝试重新循环显示用户输入的字符串。我正在使用 setInterval 或 setTimeout 执行此操作（不确定是哪一个）

因此，如果用户将 2 个条目提交到文本框表单中，则这 2 个条目将一个接一个地重复显示。

以下是我的代码，取自：jsfiddle.net/sean1rose/sKadX/4/

frm.submit(function(event) {
    event.preventDefault();
    container.push(txtBox.val());

    var i = 0;

    function myLoop(){
        setInterval(function () {
            output.text(container[i]);
            i++;
            if (i < container.length) {
                myLoop();
            }
        }, 3000)
    }

    myLoop();

    txtBox.val('');
});

就像我现在的代码一样，如果您在表单中输入 2 个不同的字符串，一个接一个，它会一个接一个地显示（有延迟），但它会在最后一个停止（它不会' t 重新循环）。

我将如何修复代码以使其不断地重新循环输入，以便它不会在最后输入的字符串处停止，而是重新启动并显示第一个输入的字符串？（希望这也适用于 2 个以上的输入。例如，如果用户输入 5 个不同的条目，那么它将循环并一遍又一遍地显示这 5 个）...

【问题讨论】：

标签： javascript jquery loops settimeout setinterval

【解决方案1】：

我稍微修改了你的小提琴。现在frm.submit 事件看起来像：

frm.submit(function (event) {
    event.preventDefault();
    container.push(txtBox.val());
    var i = 0; // to initialize the index
    clearInterval(oldHandle); //to make sure only one setInterval is running at any time
    oldHandle = setInterval(function () {
        output.text(container[i]);
        i++;
        if (i == container.length) { //this re-loops your container array once the last element is reached 
            i = 0; //reset the index
        }
    }, 500)

    txtBox.val('');
});

DEMO

编辑：对于您的后续问题，我已经spliced container 数组单击了 p 标记的索引（使用 jQuery 的 prevAll）

$(".controlbox").on('dblclick', 'p', function () {
        container.splice($(this).prevAll('p').length, 1);
        $(this).remove();
});

我还修改了frm.submit事件，现在看起来像：

oldHandle = setInterval(function () {
    output.text(container[i++%container.length]);
}, 500)

DEMO

【讨论】：

谢谢。这非常有效。后续问题：我添加了一个事件处理程序，允许通过双击条目从我的控制面板中删除条目（这发生在将条目输入到数组之后）。但是，这不会从容器阵列中删除条目。关于如何绑定/链接事件处理程序以便从控制面板中删除条目也会导致从数组中删除该条目的任何建议？ jsfiddle.net/sean1rose/sKadX/9
@Seeeyonnn 您可以使用splice 删除选定的值，使用它的索引。请参阅this（请考虑使用select/multiSelect，而不是.container>p 结构）
@Seeeyonnn 更新：multiselectreference。请参阅我在答案中发布的第二个小提琴中的select[multiple]。
谢谢！非常非常

【解决方案2】：

frm.submit(function(event) {
  event.preventDefault();
  container.push(txtBox.val());
  console.log(container);
  function myLoop(){
    setInterval(function () {
        var str="";
        for(var i=0;i<container.length;i++){
           str+=container[i]+"<br>";

        }
        output.html(str)
        myLoop();
    }, 3000)
}

myLoop();

txtBox.val('');
});

小提琴：http://jsfiddle.net/tCw8Q/

【讨论】：