2015-08-04 4 views
1

В настоящее время я стараюсь сделать небольшую игру незаметно для себя ради развлечения, когда делаю это и использую, но я застрял на части.setTimeout in for loop

Я хотел бы создать игру с памятью, в которой программа генерирует определенный массив, заполненный именами стрелок, которые должны измениться. Итак, например: слева, слева, вверх, вниз, прямо с этим, я бы хотел изменить левую стрелку 1-го только на зеленый, а не на нормальный, так как второй раз это произойдет дважды, так как 1-й 2 элемента массива «оставлены» ».

Так что я пытался использовать setTimeout в JS и попытался найти его, как его использовать, и ему удалось медленно продвигаться, но я все потерял во всех объяснениях.

Мой текущий код меняет все стрелки, указанные в зеленом массиве, а затем меняет их на нормальный 1 на 1 (на самом деле я не вижу первый смену стрелки вообще, но я предполагаю, что он просто устанавливает setTimeout к нему, поскольку остальное меняется).

for (var j = 0; j < narray.length; j++) { 

var image = document.getElementById(narray[j]); 

image.src = "arrow-"+narray[j]+"-good.png"; 
    function(j){ 
    sesetTimeout(function(){ 
    var image2 = document.getElementById(narray[j]); 
    image2.src = "arrow-"+narray[j]+".png"; 
}, j*1000); 
})(j); 

Я знаю, что это действительно грязно, но я полностью потерялся в учебниках, с которыми я пытался учиться. Поэтому, если бы кто-нибудь мог мне помочь, я был бы очень любезен. Спасибо заранее!

+2

Является ли это на самом деле ваш код, как в источнике? Кажется, он содержит много синтаксических ошибок. –

+0

Каков ваш вопрос? (Кстати, вы, вероятно, не видите первого изменения, потому что первый тайм-аут равен 0 * 1000 мс) – doldt

+0

не уверен, что вы хотите делать, что находится внутри, какие изображения вы хотите изменить источник и почему вы используете таймаут? – juvian

ответ

0

Вот что я думаю, будет работать.

k=0; 
for (var j = 0; j < narray.length; j++) { 

    var image = document.getElementById(narray[j]); 

    image.src = "arrow-"+narray[j]+"-good.png"; 
    setTimeout(function(){ 
     var image2 = document.getElementById(narray[k]); 
     image2.src = "arrow-"+narray[k]+".png"; 
     k++; 
    }, j*1000+500); 
} 

Так, помимо опечаток, есть проблема с использованием «J» из цикла в функции тайма-аута, потому что они работают позже. Поэтому мы вводим «k», чтобы отслеживать, сколько из них мы сделали. Таким образом, k будет увеличиваться каждый раз, и здесь это глобальная переменная, так как каждая функция таймаута действительно выполняется, k будет другим числом и будет увеличивать k, чтобы быть готовым к следующей, которая будет вызвана.

+0

Большое спасибо! Kinda стыдно, что я не мог думать о таком простом решении, но я мог бы продолжить то, что я планировал сделать. С уважением –

0

Что делать, если вы не используете для цикла и вызова функции рекурсивного, что-то вроде этого:

function doSomething(j,l){ 
    if(j>=l) return 'done'; 
    setTimeout(function(){ 
     console.log('step: ' + j + ' from: ' + l); 

     // add your code here :) 

    }, j*1000); 
    doSomething(++j,l); 
} 
doSomething(0,narray.length); // start with 0 and the length of the array 
+0

Да, я попытался сделать это рекурсивным, хотя я все еще не смог с индексами. Кроме того, он отлично работает! –