Javascript Pętla for i setTimeout

Wed, 18 Aug 2021 14:00:59 +0000

Witam, uczę się JS od 3 tyg. To mój pierwszy post. Zacząłem sobie taki projekcik, gra karciana (typu MagicTheGathering) w przeglądarce. Teraz piszę ruchy komputera i utknąłem tzn nie wiem czego użyć (również ogólnie, żeby ruchy komputera odbywały się jedna po drugiej, tak, żeby było widać, że coś faktycznie robi, a nie wszystko dzieje się na raz), żeby to przeskoczyć.

Problem polega na tym, że pętla robi kolejny obrót za czym setTimeout się skończy i usunie kartę. Co skutkuje tym, że poprzednia pętla znów działa na tej karcie (bo nie zdążyło jej usunąć), zamiast na następnej. (bez setTimeout działa dobrze, ale usuwa ją natychmiast i transform nie działa tzn nie zdąży zadziałać)

// e - to div z kartą
// cała funkcja również znajduje się w pętli
function pierwszyTargetKarta(jakiDmg) {
  const wystawioneKarty = wystKartyWalka.children;
  if (wystKartyWalka.children.length < 1) return false;
  
  Array.from(wystawioneKarty).forEach(e => {
    const hpTeraz = e.dataset.nowhp;
    
    if (jakiDmg >= hpTeraz && komp.juzZaatakowales === 0) {
      komp.juzZaatakowales = 1;
      init.iloscWystawionychKart--;
      e.style.transition = "transform 600ms";
      e.style.transform = "translate(0px, 300px)";
      setTimeout(() => {
        e.remove();
      }, 700);
    }
  }); 
}

Próbowałem to zamknąć w funkcji asynchronicznej, ale właściwie robi to samo.

function pierwszyTargetKarta(jakiDmg) {
  const wystawioneKarty = wystKartyWalka.children;
  if (wystKartyWalka.children.length < 1) return false;
  
  Array.from(wystawioneKarty).forEach(e => {
    const hpTeraz = e.dataset.nowhp;
    
    (async () => {
      if (jakiDmg >= hpTeraz && komp.juzZaatakowales === 0) {
        komp.juzZaatakowales = 1;
        init.iloscWystawionychKart--;
        e.style.transition = "transform 600ms";
        e.style.transform = "translate(0px, 300px)";
        const usun = await usuwanieKarty(e);
      }
    })();
  }); 
}
function usuwanieKarty(e) {
  return new Promise(resolve => {
    setTimeout(() => {
      e.remove();
      console.log("usunalem")
      resolve('usunalem');
    }, 700);
  });
}

Może mnie ktoś naprowadzić czego użyć, ewentualnie jak to ugryźć. I co mogę używać do synchronizacji ruchów komputera (w sumie opóźnienia funkcji), czy async to dobry pomysł.

Mam nadzieje, że opisałem to w miarę zrozumiale.

Dzięki.

@edit

Wdrążyłem w życie wasze propozycje i z async function sleep działa przy pierwszym okrążeniu, jak jest więcej elementów to po prostu znikają.

Żeby to bardziej z wizualizować problem skróciłem do minimum kod i wrzuciłem na jsfiddle:

https://jsfiddle.net/pLyhdn8r/

JavaScript - sumowanie i mnożenie kolejnych elementów tablicy

Sat, 23 Dec 2017 17:33:44 +0000

Cześć! Problem pewnie banalny, ale dla mnie temat jest całkowicie nowy i stanęłam przed ścianą.

Tworzę tablicę var liczby = [1,2,3,4,5,6]

I za pomocą funkcji forEeach powinnam osiągnąć efekt, jak po wyrzuceniu:

console.log(liczba[0]*liczba[1]+liczba[0]+liczba[1]);

Pewnie jest to bardzo proste, ale jako śweżynka nie mogę tego rozgryźć :/

Forum Pasja Informatyki - Najnowsze z tagiem petla-foreach

Javascript Pętla for i setTimeout

JavaScript - sumowanie i mnożenie kolejnych elementów tablicy