Question

所以我有以下代码，我基本上只是一个JSON字符串，我使用eval转换为一个对象。现在，这个对象有一个元素数组，通过for循环显示在屏幕上：

function DisplayListing(str)
{
    var obj = eval("(" + str + ")");
    var div = document.getElementById('Response');
    for(i=0; i<obj.files.length; i++)
    {
        div.innerHTML += '<span id="listing' + i + '" class="displayNone"><img src="' + obj.files[i].icon + '"/>' + obj.files[i].name + '</span><br />';   
    }   
}

这很好用。但是，我想要它做的是等待一段时间后再继续下一个元素。我想它基本上调用一个超时函数，所以每个元素都单独淡入屏幕。到目前为止的所有尝试都会导致最后一个元素执行一个函数。任何帮助将不胜感激！

Answer 1

http://jsfiddle.net/SfKNc/

var obj = {files: [1, 2, 3]}; // sample object - use JSON.parse by the way
var div = document.getElementById('Response');
for(var i=0; i<obj.files.length; i++) { // use var!
    setTimeout((function(i) {
        return function() { // i changes, so create a new function in which i does not change
            div.innerHTML += 
                '<span id="listing' + i + 
                '" class="displayNone">' + i + 
                '</span><br />';
        };
    })(i), i * 1000); // set timeout to 1000 ms for first item, 2000 for second etc.
}

Answer 2

你手动创建了一个类似下面的睡眠功能：

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

或者你创建一个空函数并在其上使用setTimeout

  function sleep()
    {
    setTimeout(Func1, 3000);
    }

    Func1(){}

http://www.phpied.com/sleep-in-javascript/

Javascript for循环问题

2 个答案: