$。每个显示数据然后暂停3秒
[英]$.each display data then pause for 3 seconds
I'm iterating a JSON file using .each(). I want my page to show data for say 3 seconds, pause for 3 seconds then move on to the next one and repeat. I have this code:
我正在使用.each（）迭代一个JSON文件。我希望我的页面显示3秒的数据，暂停3秒然后继续下一个并重复。我有这个代码：
$.getJSON(url,function(json1){
$.each(json1.data,function(numb){
setTimeout(function() {
alert(json1.data[numb]["title"]);
},3000);
});
});
I thought this would do it but this only waits for 3 seconds and then displays each bit of data in succession, and I need them to be 3 seconds apart.
我认为这样做会但是这只等待3秒然后连续显示每一位数据，我需要它们相隔3秒。
How do I get that? Thanks!
我怎么做到的？谢谢！
EDIT: ok, so with this code: var num=0;
编辑：好的，所以使用这段代码：var num = 0;
$.getJSON(url,function(json1){
$.each(json1.data,function(broj){
setTimeout(function() {
$(".bubble").text(json1.data[broj]["text"]);
},6000*num);
num++;
});
});
But this is about half a second late to other elements that use setInterval(func,3000) to display data. Why and can it be fixed? I'm really interested.
但是这比使用setInterval（func，3000）显示数据的其他元素迟了大约半秒。为什么和它可以修复？我真的很感兴趣。
4 个解决方案
#1
2
Times by the index:-
时间由指数： -
$.getJSON(url, function(json1) {
$.each(json1.data, function(numb) {
setTimeout(function() {
alert(json1.data[numb]["title"]);
}, 3000 * num);
});
});
This will make the 1st 0 seconds, 2nd 3 seconds, 3rd 6 seconds, etc.
这将使第1 0秒，第2 3秒，第3 6秒等。
or it you want the 1st to wait also, use:
或者你想要第一个等待，使用：
3000 * (num+1)
#2
1
var count = 0;
$.each(mydata, function(data){
count++;
setTimeout(function() {
console.log(data);
},3000 * count);
})
#3
1
This is because setTimeout isn't blocking, so the each loop flies through declaring all the timeouts and then 3 seconds later they all fire. You could probably instead chain the setTimeouts together almost calling them recursively. Inside each setTimeout you would call the next setTimeout passing it the next data element instead of the each loop (May still need some type of counter to increment so you have an index to the item. Increment it and do the bounds checking in setTimeout.). That way the next setTimeout isn't declared until the previous completes.
这是因为setTimeout没有阻塞，因此每个循环飞过声明所有超时，然后3秒后它们全部触发。您可能会将setTimeouts链接起来，几乎以递归方式调用它们。在每个setTimeout内部，你将调用下一个setTimeout传递下一个数据元素而不是每个循环（可能仍然需要某种类型的计数器来增加，所以你有一个项目的索引。增加它并在setTimeout中进行边界检查。） 。这样，下一个setTimeout在前一个完成之前不会被声明。
I actually just did something recently setting an alert bar to change every 5 seconds showing text from an array like:
我实际上刚做了一些事情，最近设置了一个警报栏，每隔5秒更改一次显示来自数组的文本，如：
var speed = 5000; /*this is the time in milliseconds adjust to suit*/
function showAlert(x) {
if (!x || x > (sysAlert.length - 1) || x < 0) x = 0;
document.getElementById("alertBar").innerHTML = sysAlert[x];
return setTimeout(showAlert, speed, ++x);
}
showAlert(0);
#4
0
Assuming the index numb is numeric:
假设索引numb是数字：
$.getJSON(url,function(json1){
var numb = 0; // starting point of array
var iterate = function(){
if(json1.data[numb]){ // only setTimeout if this index exists
alert(json1.data[numb++]["title"]);
setTimeout(iterate, 3000);
}
}
// show the first result immediately
iterate();
// OR
// show the first result 3000 milliseconds after the data is loaded
// setTimeout(iterate, 3000);
});
注意！
本站翻译的文章，版权归属于本站，未经许可禁止转摘，转摘请注明本文地址：http://www.silva-art.net/blog/2016/09/21/7ddd785dd141ed0bada000e38f730a3f.html。