[JS] Kolejkowanie lub opóźnianie funkcji

0

Witam
Zrobiłem galerią w JS i wywołuję ją na stronie funkcją "galery(...)". W definicji tejże funkcji korzystam z AJAX -> PHP wiec jej wykonanie trwa jakiś czas.

Problem tkwi w tym że gdy chcę wywołać funkcję "galery(..)" kilka razy z przyczyn oczywistych każde kolejne wywołanie nie czeka na wykonanie się poprzedzającej funkcji. Najłatwiejszym rozwiązanie byłoby pewnie wywołanie jej w "setTimeout" z pewnym zapasem lecz gdy odpowiedź serwera będzie dłuższa od zakładanej wszystko się posypie a tego bym nie chciał.
Jaki byłby najrozsądniejszy sposób kolejkowania lub opóźniania tych funkcji.
Pozdrawiam.

0

Może byś tak podał kod* co? Skąd by mamy wiedzieć gdzie masz błąd?

* który się sypie, żeby nie było, że Ci chcemy ukraść.

0

Funkcja "galery(...)" jest funkcją wykonawczą wielu innych funkcji, między innymi funkcji $.AJAX. Ta z kolei odwołuje się do skryptu PHP który musi poczekać na odpowiedź serwera. Gdy już ją otrzyma zwraca do JS wartości pewnych zmiennych. Sama funkcja "galery(...)" jak i inne funkcje które wykonuje nie zawierają błędów. Gdy wywołuję ją na stronie tylko raz wszystko smiga. Problem w tym że gdy wykonuje ją kilka razy z rzędu nadpisuje wartości pewnych zmiennych galerii (a AJAX -> PHP jest jeszcze w toku) nadanych przez poprzedzające wywołania. Co za tym idzie pewne zmienne (z AJAX) mają wartości z pierwszego wywołania a inne (bez AJAX) z drugiego wywołania. W samych kodzie funkcji nie ma błędów. Liczę na podpowiedz dotyczącą sposobu rozwiązania tej sytuacji. Z kodem sobie poradzę.

0

Poniżej moja ogólna koncepcja rozwiązania problemu. Pokomentowałem tu i ówdzie, także chyba da radę zrozumieć co się dzieje. Enjoy ;)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="jquery.js"></script>
  <script>
    
    var Kolejka = function(opcje) {
    
      // ustawienie opcji
      opcje = opcje || {};
      opcje.url = opcje.url || "";
      opcje.odpowiedz = opcje.odpowiedz || function() { };
    
      // lista zakolejkowanych elementów
      var lista = [];
      
      var aktywny = false;
      
      function dodaj(co) {
        lista.push(co);
        // odpal wysyłanie zapytań do serwera tylko jeden raz, w momencie dodania pierwszego elementu do listy
        if (lista.length == 1 && !aktywny) {
          aktywny = true;
          dzialaj(0);
        }
      };
      
      
      function dzialaj(numer) {
        // nie ma nic w kolejce, przerwij i resetuj
        if (numer >= lista.length) {        
          aktywny = false;
          lista = []; 
          return;
        }
        
        // pobierz ostatni dodany element
        // zostanie on przekazany do serwera
        var dana = lista[numer];
        
        // AJAX MAGIC!
        // przetwarzaj.php robi coś z przekazanym elementem i zwraca odpowiedź)
        $.get(opcje.url + dana, function(odpowiedz) {
          // odpowiedź z serwera umieść w polu tekstowym
          opcje.odpowiedz(odpowiedz);
          
          // i jeszcze raz to samo, w koło macieju
          dzialaj(numer + 1);
        });
      
      };
      
      this.dodaj = dodaj;
    };
    
    $(window).ready(function() {
      
      var kulejka = new Kolejka({
        url: "przetwarzaj.php?dana=",
        odpowiedz: function(odpowiedz) {
          $("#tbOdpowiedzi").val( $("#tbOdpowiedzi").val() + "\r\n" + odpowiedz );
        }
      });
      
      $("article a.eg").click(function(evt) {
        
        // dodaj do kolejki zawartość html klikniętego linka
        kulejka.dodaj($(this).html());
        
        evt.preventDefault();
      });
    });
    
  </script>
  <style>
    body { width: 600px; margin: 0 auto; font-family: Arial sans-serif; }
    ul { list-style-type: none; }
    ul li { display: inline; }
    #tbOdpowiedzi { width: 400px; height: 220px; }
  </style>
</head>
<body>
  <article>
    <ul>
      <li><a href="#" class="eg">abra</a></li>
      <li><a href="#" class="eg">kadabra</a></li>
      <li><a href="#" class="eg">hokus</a></li>
      <li><a href="#" class="eg">pokus</a></li>
      <li><a href="#" class="eg">czary</a></li>
      <li><a href="#" class="eg">mary</a></li>
    </li>
    <textarea id="tbOdpowiedzi"></textarea>
  </article>
</body>
</html>
0

thnx. Pokombinuję... :)

1 użytkowników online, w tym zalogowanych: 0, gości: 1