代码之家 › 专栏 › 技术社区 › Philipp Chapkovski

来自json的超时链

jquery javascript

Philipp Chapkovski · 技术社区 · 6 年前

我从服务器接收到一个json对象,它类似于:

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

我的任务是随后显示这些行:第一行在1秒之内,第二行在2秒之内,第三行在2.5秒之内等等。

我当然可以生成一系列 setTimeout ,但我想知道是否有更有效的方法来做到这一点?

0 回复 | 直到 6 年前

Charlie 6 年前

到目前为止,没有一个答案注意到OPS声称他不想创建多个 setTimeout 或 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);

Mohamed-Yousef 6 年前

^{当您标记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>

yojake42 6 年前

如果你想用前后一致的时差来显示线条 setTimeout 的兄弟函数, 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 delay函数,但这只在使用jquery effects显示文本时有效。请在此处阅读: https://api.jquery.com/delay/

归根结底,这些都是可行的选择,但是使用 设置超时 是解决问题的最干净的方法。

Sachintha Nayanajith 6 年前

可以使用这样的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);