嵌套循环（2级）JavaScript超时

Question

There were questions with looping in Javascript and I followed them to create my loop. But my issue is that I want a double loop. I am having an html with a div-container that has an image.

<div id="myDiv">
<img alt="Client Logo" src="1/1-1.png" />
</div>

Images are stored in folders 1 to 7 (their names). Hence, source of images looks like this 1/1-1.png, 3/3-264.png, 4/4-489.png etc. Files in every folder before the dash sign have the number of the folder as well. The goal: I want to show all the pictures with a timeout starting with 1/1-1.png, then 1/1-2.png, 1/1-3.png...2/1-1.png,2/1-2.png etc. one after another till 7/7-608.png. Ie there are 608 images in every folder. I am doing this:

for (var f=1; f<=7;f++) {
for (var s=1; s<=608; s++) {
doSetTimeout(s,m);
} }
function doSetTimeout(i,f) {
var timer = i+(f-1)*608;
setTimeout(function(){$('#myDiv img').attr('src',f+'/'+f+'-'+i+'.png')},500*timer);
}

But it doesn't work. It used to work fine without the outer loop of f. So, obviously, I am doing something wrong. Maybe, because the variables are global, but I don't quite get what it means in this context. Would really appreciate your help.

Answer 1

You have a typo. You are sending in (s, m) instead of (s, f) .

try

for (var f=1; f<=7;f++) {
  for (var s=1; s<=608; s++) {
    doSetTimeout(s,f);
} }