Animated/timed 文本 JavaScript return

Animated/timed text with JavaScript return

我有以下代码:

function list() {
    return "blob1<br>blob2<br>blob3";
}

当此代码为运行时,在函数调用时直接显示return中的全文。

有没有办法让它显示blob1,然后等待0.5秒,然后显示blob2,再过0.5秒显示blob3

您可以使用setTimeout来延迟函数的执行:

var text = ["blob1", "blob2", "blob3"],
    target = document.getElementById('target');
(function display() {
    if(!text.length) return;
    target.textContent = text.shift();
    setTimeout(display, 500);
})();
<div id="target"></div>

function list(num) {
    return "blob" + num;
}

var num = 1;

setInterval(function(){
    list(num);
    num ++;
}, 500);

http://jsfiddle.net/yfhxgenf/

所以这段代码每半秒调用一次列表函数并发送一个数字。每当间隔为 运行.

时,数字就会增加 1

列表函数将每半秒 return blob1、blob2、blob3、blob4、blob5 等等。

查看 jsfiddle 并打开控制台查看结果。

此外,我假设您正在对这个字符串做进一步的处理。现在它没有显示在任何地方。

而且,如果你只想让它达到 3,你可以添加一个检查来破坏 num 达到 3 时的间隔。

http://jsfiddle.net/yfhxgenf/1/

我可能会这样做:

var stack = ["blob1", "blob2", "blob3"];

function nextItem() {
    document.body.innerHTML += stack.shift() + "<br>";
}

nextItem();
setTimeout(nextItem, 500);
setTimeout(nextItem, 1000);