Question

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

来做这个

因此，如果用户将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个不同的字符串，一个接一个，它会一个接一个地显示（有延迟），但它会在最后一个停止（它赢了'重新循环）。

如何修复代码以使其连续重新循环输入，使其不会停在最后输入的字符串，而是重新启动并显示第一个输入的字符串？（这应该也适用于2个以上的输入。例如，如果用户输入5个不同的条目，那么它将循环直播并反复显示这5个...）

Answer 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

修改：对于您的后续问题，我splice点击了container数组，点击了p标记的索引（使用jQuery的prevAll）< / p>

$(".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

Answer 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/

如何重新循环setInterval / setTimeout函数

2 个答案: