每隔10秒在FOR内部运行一个函数

Question

我在我的剧本中有这个：

for(var i = 0, l = eachLine.length; i < l; i++) {
 if(eachLine[i].length>0){
  doP(eachLine[i], +i);
 }
}

从字符串读取行并调用doP函数。 发生的事情是它太快并且在我的网络上导致一些速度问题，具体取决于文本大小。

我想要的是每10秒调用一次doP函数...换句话说，我想等待10秒再次调用doP函数...我怎样才能使它工作？

Answer 1

使用setInterval()

var i = 0, len = eachLine.length;
function looper(){
    if(i == 0)
        interval = setInterval(looper, 10000)
    if(eachLine[i].length > 0)
        doP(eachLine[i], ++i);
    if(i >= len) 
        clearInterval(interval);
}
looper();

＆＃13;

＆＃13;

var eachLine = ["Hi", "there", "I", "am", "lines", "of", "text"];
var i = 0, len = eachLine.length;
function looper(){
    if(i == 0)
        interval = setInterval(looper, 2000)
    if(eachLine[i].length > 0)
        doP(eachLine[i], ++i);
    if(i >= len) 
        clearInterval(interval);
}
looper();

function doP(line, count){
    $('body').append(count + ": " + line + "<br/>");
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

使用setTimeout()

var i = 0, len = eachLine.length;
function looper(){
    if(eachLine[i].length > 0)
        doP(eachLine[i], ++i);
    if(i < len) 
        setTimeout(looper, 10000);
}
looper();

＆＃13;

＆＃13;

var eachLine = ["Hi", "there", "I", "am", "lines", "of", "text"];
var i = 0, len = eachLine.length;
function looper(){
    if(eachLine[i].length > 0)
        doP(eachLine[i], ++i);
    if(i < len) 
        setTimeout(looper, 2000);
}
looper();

function doP(line, count){
    $('body').append(count + ": " + line + "<br/>");
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您希望第一行立即显示，您需要将代码包装在一个函数中，以便可以进行初始调用。

另一个例子包括计数器，所以这里是另一个选项（使用带有递归函数的数组上的slice）。

评论递归版：

function processLine(eachLine, count)
{
    // if there are any array entries left...
    if (eachLine.length){

        // Call the worker function the first line in the array
        doP(eachLine[0], count);

        // Wait 10 seconds then call this function recursively
        setTimeout(function(){

           // Slice the arrat to remove the entry already processed and pass an incremented counter
           processLine(eachLine.slice(1), count+1);
        },10000);
    }
}
// Do the initial call and start the process off
processLine(eachLine,1);

以下工作片段：

我缩短了这个例子的时间延迟。

＆＃13;

＆＃13;

var eachLine = ["Hi", "there", "I", "am", "lines", "of", "text"];

function doP(line, count){
	$('body').append(count + ": " + line + "<br/>");
}

function processLine(eachLine, count)
{
	if (eachLine.length){
  		doP(eachLine[0], count)
		setTimeout(function(){
  		    processLine(eachLine.slice(1), count+1);
    	},1000);
    }
}
processLine(eachLine,1);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

使用重复的setTimeout()电话：

var i = 0;
function processLine(){
    if(eachLine[i++].length > 0){
        doP(eachLine[i], i);
    }
    // if any entries left, process them pseudo-recursively via timer
    if(i < eachLine.length) {
        setTimeout(processLine, 10000);
    }
}
// Run initial first line immediately
processLine();

＆＃13;

＆＃13;

var eachLine = ["Hi", "there", "I", "am", "lines", "of", "text"];
var i = 0, len = eachLine.length;
var i = 0;
function processLine(){
    if(eachLine[i++].length > 0){
        doP(eachLine[i], i);
    }
    if(i < eachLine.length) {
        setTimeout(processLine, 10000);
    }
}
processLine();

function doP(line, count){
	$('body').append(count + ": " + line + "<br/>");
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;