$.each 显示数据然后暂停 3 秒答案

【问题标题】：$.each display data then pause for 3 seconds$.each 显示数据然后暂停 3 秒
【发布时间】：2017-01-30 03:15:19
【问题描述】：

我正在使用 .each() 迭代 JSON 文件。我希望我的页面显示数据 3 秒，暂停 3 秒，然后转到下一个并重复。我有这个代码：

    $.getJSON(url,function(json1){
                    $.each(json1.data,function(numb){
                        setTimeout(function() {
                            alert(json1.data[numb]["title"]);   
                        },3000);

                    });     

            });

我以为这样就可以了，但这只等待 3 秒，然后连续显示每一位数据，我需要它们相隔 3 秒。

我如何得到它？谢谢！

编辑：好的，所以使用以下代码：变量数=0;

                $.getJSON(url,function(json1){

                    $.each(json1.data,function(broj){

                        setTimeout(function() {

                            $(".bubble").text(json1.data[broj]["text"]);    

                        },6000*num);
                        num++;
                    });



            });

但这比其他使用 setInterval(func,3000) 显示数据的元素晚了大约半秒。为什么以及可以修复？我真的很感兴趣。

【问题讨论】：

标签： javascript jquery json loops timeout

【解决方案1】：

索引次数：-

$.getJSON(url, function(json1) {
  $.each(json1.data, function(numb) {
    setTimeout(function() {
      alert(json1.data[numb]["title"]);
    }, 3000 * num);
  });
});

这将使第一个 0 秒、第二个 3 秒、第三个 6 秒等

或者你想让第一个也等待，使用：

3000 * (num+1)

【讨论】：

为什么这种晚了？它并没有真正开始，它大约晚了一秒钟。这是一个问题，因为我还有其他事情与 setInterval(f,3000) 一起发生并且它们不同步。

【解决方案2】：

var count = 0;

$.each(mydata, function(data){
count++;
setTimeout(function() {
                        console.log(data);   
                    },3000 * count);
})

【讨论】：

【解决方案3】：

这是因为 setTimeout 没有阻塞，所以每个循环都会飞过声明所有超时，然后 3 秒后它们都会触发。您可能可以将 setTimeouts 链接在一起，几乎递归地调用它们。在每个 setTimeout 中，您将调用下一个 setTimeout，将下一个数据元素而不是每个循环传递给它（可能仍然需要某种类型的计数器来增加，以便您拥有项目的索引。增加它并在 setTimeout 中进行边界检查。） .这样下一个 setTimeout 直到前一个完成才会声明。

实际上，我最近刚刚做了一些事情，设置了一个警报栏，每 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】：

假设索引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);
});

【讨论】：