Question

我从服务器收到一个json对象，它看起来像这样：

{1000: "Paragraph 1",
2000: "Paragraph 2",
2500: "Paragraph 3",
...
11500: "Paragraph 20",}

我的任务是随后显示这些行：1秒内显示第一行，2秒内显示第二行，2.5秒内显示第三行，等等。

我当然可以生成一系列setTimeout，但是我想知道是否有更有效的方法？

Answer 1

到目前为止，没有一个答案引起OP的注意，他声称他不想创建多个setTimeout或setInterval。

我们确实可以创建一个setInterval并使其在JSON中定期进行迭代。

var data = {
  1000: "Paragraph 1",
  2000: "Paragraph 2",
  2500: "Paragraph 3",
  5000 : "Paragraph 5",
  11500: "Paragraph 20"
};

var keys = Object.keys(data);
var i = 0;

var handle = setInterval(()=> {

   console.log(data[keys[i++]]);

   if (i === keys.length)
     clearInterval(handle)

}, 250);

Answer 2

如果您想在各行之间使用一致的时间差来显示行，则可以使用setTimeout的兄弟函数setInterval。

如果需要，可以使用setInterval并使用函数来更改间隔时间

var waitTime = 1000;
var myFunction = function(){
    //your code to display a line of text

    clearInterval(interval);
    waitTime += 50;  //make your changes to wait time
    interval = setInterval(myFunction, waitTime);
}
var interval = setInterval(myFunction, waitTime);

最后，您可以使用jquery延迟功能，但这仅在使用jquery效果显示文本时才有效。在这里阅读：https://api.jquery.com/delay/

最终，这些选项会起作用，但是使用setTimeout是解决问题的最干净的方法。

Answer 3

^{虽然您标记了一个jQuery} ..所以$.each()是一种简单的方法

ES 5

var Json = {
  1000: "Paragraph 1",
  2000: "Paragraph 2",
  2500: "Paragraph 3",
  5000 : "Paragraph 5",
  11500: "Paragraph 20"
};


PrintResults(Json);


function PrintResults(result) {
  $.each(result , function(key , value){
    setTimeout(function(){
      console.log('Time is: '+key+' .. Value is: '+value);
    } , key);
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

其他 ES 6

var Json = {
  1000: "Paragraph 1",
  2000: "Paragraph 2",
  2500: "Paragraph 3",
  5000 : "Paragraph 5",
  11500: "Paragraph 20"
};


PrintResults(Json);


function PrintResults(result) {
  $.each(result , (key , value) => {
    setTimeout(() => {
      console.log(`Time is: ${key} .. Value is: ${value}`);
    } , key);
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 4

可以使用像这样的javascript

var obj = {
    1000: "Paragraph 1",
    2000: "Paragraph 2",
    2500: "Paragraph 3",
    11500: "Paragraph 20"
}

function displayResults(obj){
    
    var time = Object.keys(obj);
    var val = Object.values(obj);
    time.forEach(function(item, index){
        setTimeout(function(){
            console.log("The time is " + item + " The value is " + val[index]);
        }, item);
    }) 

}

displayResults(obj);

在JSON中创建时序输出的最有效方法是什么？

4 个答案: