如何延迟这段代码在JavaScript中运行？

我写了这个代码更改图像：如何延迟这段代码在JavaScript中运行？

change = function(){ 
    for (r=0; r<6; r++){ 
     for (i = 0; i < 6 ; i++) { 
      setInterval(imgfile(number=i+1), 5000); 
     } 
    } 
} 

imgfile= function(number){ 
    a = 'document.getElementById("imgdiv").src = "images/'+number+'.svg"'; 
    eval(a); 
}

功能change()一个按钮被点击时被调用。当我按下按钮时，图像将直接变为6.svg，当我想要它通过图像1,2,3,4,5,6并重复6次。当我将setInterval更改为change.setInterval或imgfile.setInterval时，它根本不起作用。我该如何解决？

来源

2017-04-16 Henry

为什么'eval（）'？ O.o – Andreas

'eval'的一个规则：不要使用eval，因为eval是邪恶的。 – Frxstrem

你需要用'let'关键字来阻止你的''''变量的范围，或者把它封装在一个闭包中！ –

change = function(i=0){ 
     imgfile(i%6+1);//change image 
     if(i<36) setTimeout(change,5000,i+1);//next image in 5 seconds 
} 

imgfile= function(number){ 
    document.getElementById("imgdiv").src = "images/"+number+".svg";//no need to use ev(i||a)l 
}

相反循环/区间乱七八糟的，你可以简单地启动改变图像后重新启动本身超时...这段代码将环比6倍的图像以5秒的延迟和6倍。 ..

来源

2017-04-16 15:05:42

-1

你想做setTimeout()。

setTimeout为millesecond值暂停，然后执行代码。凡setInterval运行代码无论milleseconds。

是的，不要做change.setInterval什么的，它只是setInterval。

一个例子是你会在for循环中取代setInterval函数。

setTimeout(imgfile(i+1), 5000);

来源

2017-04-16 15:03:56

请不要试图教导别人，你不太了解自己。 setTimeout（imgfile（number = i + 1），5000）;将立即调用imgfile **现在** –

哦，我明白了，我只是把他的代码。但是，这个参数没有多大意义。 –

对于另一个问题，我写了一个很好的实用函数，有很多用途，但也可以很容易地处理这种情况。主要问题是在设定的不同延迟之间没有时间流逝。所以你在5000ms内设置了6种不同的动作，所有动作都会在同一时刻发生。

这里是我的original answer

下面是这个问题的答案效用函数，其推广应用到你的问题一起。

function doHeavyTask(params) { 
 
    var totalMillisAllotted = params.totalMillisAllotted; 
 
    var totalTasks = params.totalTasks; 
 
    var tasksPerTick = params.tasksPerTick; 
 
    var tasksCompleted = 0; 
 
    var totalTicks = Math.ceil(totalTasks/tasksPerTick); 
 
    var initialDelay = params.initialDelay; 
 
    var interval = null; 
 
     
 
    if (totalTicks === 0) return; 
 
    
 
    var doTick = function() { 
 
    var totalByEndOfTick = Math.min(tasksCompleted + tasksPerTick, totalTasks); 
 
    
 
    do { 
 
     params.task(tasksCompleted++); 
 
    } while(tasksCompleted < totalByEndOfTick); 
 
     
 
    if (tasksCompleted >= totalTasks) clearInterval(interval); 
 
    }; 
 
    
 
    // Tick once immediately, and then as many times as needed using setInterval 
 
    if (!initialDelay) doTick(); 
 
    if (tasksCompleted < totalTicks) interval = setInterval(doTick, totalMillisAllotted/totalTicks); 
 
} 
 

 
// Do 6 actions over the course of 5000 x 6 milliseconds 
 
doHeavyTask({ 
 
    totalMillisAllotted: 5000 * 6, 
 
    totalTasks: 6, 
 
    tasksPerTick: 1, 
 
    initialDelay: false, // Controls if the 1st tick should occur immediately 
 
    task: function(n) { console.log('Set image to "images/' + (n + 1) + '.svg"'); } 
 
});

来源

2017-04-16 15:05:59

它总是一个好主意，用不少代码解决不了解决方案的新手......;） –

这样的事情，也许？

var index, imgCount, loopCount, imgTag, countdown; 

index = 0; 
imgCount = 6; 
loopCount = 6; 
imgTag = document.getElementById('imgdiv'); 

countdown = function() { 
    if (index < imgCount * loopCount) { 
    imgTag.src = 'images/' + index % imgCount + '.svg'; 
    index = index + 1; 
    setTimeout(countdown, 5000); 
    } 
}; 

countdown();

在这里，我们避免双循环和使用模块化数学（索引％imgCount）来获取正确的文件编号。

来源

2017-04-16 16:21:00

如何延迟这段代码在JavaScript中运行？

回答

相关问题