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);
所以这段代码每半秒调用一次列表函数并发送一个数字。每当间隔为 运行.
时,数字就会增加 1
列表函数将每半秒 return blob1、blob2、blob3、blob4、blob5 等等。
查看 jsfiddle 并打开控制台查看结果。
此外,我假设您正在对这个字符串做进一步的处理。现在它没有显示在任何地方。
而且,如果你只想让它达到 3,你可以添加一个检查来破坏 num 达到 3 时的间隔。
我可能会这样做:
var stack = ["blob1", "blob2", "blob3"];
function nextItem() {
document.body.innerHTML += stack.shift() + "<br>";
}
nextItem();
setTimeout(nextItem, 500);
setTimeout(nextItem, 1000);
我有以下代码:
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);
所以这段代码每半秒调用一次列表函数并发送一个数字。每当间隔为 运行.
时,数字就会增加 1列表函数将每半秒 return blob1、blob2、blob3、blob4、blob5 等等。
查看 jsfiddle 并打开控制台查看结果。
此外,我假设您正在对这个字符串做进一步的处理。现在它没有显示在任何地方。
而且,如果你只想让它达到 3,你可以添加一个检查来破坏 num 达到 3 时的间隔。
我可能会这样做:
var stack = ["blob1", "blob2", "blob3"];
function nextItem() {
document.body.innerHTML += stack.shift() + "<br>";
}
nextItem();
setTimeout(nextItem, 500);
setTimeout(nextItem, 1000);