Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][JQuery] asynchroniczność oraz wywołanie funkcji kilka razy
Forum PHP.pl > Forum > Po stronie przeglądarki
KotWButach
Witam

Mam problem
Posiadam funkcję/metode (prototypy) wywoływaną kilka razy

  1.  
  2. Alert.box('error', msg, 5);
  3. Alert.box('info', msg, 5);
  4.  
  5. // [.. leci sobie kod leci ...]
  6.  
  7. Alert.box('success', msg, 10);
  8.  


Problem polega na tym że javascript wykonuje obie funkcje jednocześnie co za tym idzie nadpisuje mi informacje takie jak czas, wiadomość oraz rodzaj alerta.

Co zrobić by te funkcje wykonywały się jedna po drugiej. Tak by dopiero po zakończeniu pierwszej wykonywała się druga lub lepiej by poprzednia się przerywała ale by zachowały ustawienia oraz kolejności

Mówiąc inaczej wszystkie trzy alerty wyświetlą się w ciągu czasu z ostatniej metody czyli 10 oraz z kolorem 'success' i wiadomością z ostatniego box-a. Czyli zamiast 20 sekund na wyświetlenie 3 alertów mam 10 sekund.
markuz
A w jaki sposób przechowujesz te alerty? Pokaż źródło Alert. Proponuję zrobić tablicę w Alert np. alerts. Metoda box dodaje element do tablicy. Nastepnie timer co 1000ms i obsluga wyświetlania aktualnego alertu.
KotWButach
Hmm to i tak nic nie da gdyż jeżeli podczas wyświetlania jakiegoś alerta dodamy do tablicy kolejny i co sekundę sie wywoła to znów będzie taka sama sytuacja nałożą się te alerty na siebie. Co gorsza cześć z alertów może się nie wyświetlić w ogóle.
trueblue
Możesz obsługiwać callback. Jako czwarty parametr podajesz funkcję, która ma być wykonana po zakończeniu jakiejś akcji.
W kodzie wywołujesz tą funkcję kiedy zakończy się "jakaś" akcja.

  1. aaa(1, function(){
  2. bbb(1);
  3. });
KotWButach
Próbowałem wywalało mi błąd nie umiem jej zastosować jak by to się miało do mojego przykładu proszę pomóż. Poza tym nie da się zrobić listy gdyz te alerty będzie ich setki w całym kodzie.
markuz
Specjalnie dla Ciebie: http://jsfiddle.net/xLw852hL/
Update: http://jsfiddle.net/xLw852hL/1/

Tutaj masz przykład wiadomości która zostala dodana "po czasie": http://jsfiddle.net/xLw852hL/2/
Skrypt jest na tyle dynamiczny, że możesz dodawać "alerty" w każdym momencie.
KotWButach
Co to jest za dziwna składnia? Ucze się i zaskoczeniem jest dla mnie coś takiego z tymi dwukropkami.
markuz
To za długo się nie uczyłeś smile.gif Równie dobrze mogłem używać = i ; (dla obiektów tzn. function()) aczkolwiek mi jest łatwiej używać : oraz , (do "niby" obiektów statycznych a raczej skrótów (namespace))
KotWButach
Ale to jest rodzaj klasy? Jak prototype?
markuz
To jest coś typu klasa statyczna w PHP z namespace. Zwykłe klasy w js tworzysz za pomocą function().

Tutaj możesz jej używać bez tworzenia instancji.
KotWButach
Dziękuje Ci za odpowiedzi smile.gif Jeżeli wiesz jeszcze może gdzie o tym poczytać smile.gif
KotWButach
Ale i tak pojawił mi się problem ponieważ funkcja jest wykonywana co sekundę więc tyle razy widzę animacje sad.gif
markuz
A skąd ja mogę wiedzieć jak ty to wywołujesz? Nie chcesz pokazać kodu a potem narzekasz ;d
KotWButach
  1. var Dialog = {
  2. data: [],
  3. add: function(type, text, seconds) {
  4. this.data.push({
  5. type: type,
  6. text: text,
  7. seconds: seconds
  8. });
  9. },
  10. display: function(i) {
  11. if (this.data[i] === undefined)
  12. return false;
  13. var quene = this.data[i];
  14. if (quene.seconds <= 0)
  15. return false;
  16. quene.seconds--;
  17. this.data[i].seconds = quene.seconds;
  18. var type = quene.type;
  19. var content = quene.text + ' (' + quene.seconds + ')';
  20.  
  21. $('.alert').removeClass('alert-info');
  22. $('.alert').removeClass('alert-success');
  23. $('.alert').removeClass('alert-error');
  24. $('.alert').css('display', 'block');
  25.  
  26. $('.alert').addClass(type);
  27.  
  28. document.querySelector('.alert p').innerHTML = content;
  29.  
  30. if (quene.seconds === 0) {
  31. $('.alert').hide("slide", {direction: "down"}, 1000);
  32. }
  33.  
  34. },
  35. update: function() {
  36. for (var i = 0; i < this.data.length; i++) {
  37. if (this.data[i] === undefined)
  38. continue;
  39. if (this.data[i].seconds === 0)
  40. continue;
  41.  
  42.  
  43. this.display(i);
  44.  
  45. //$('.alert').hide("slide", { direction: "down" }, 1000);
  46. break;
  47. }
  48. ;
  49. }
  50.  
  51. };
  52. Dialog.add('alert-info', 'elo 54', 2);
  53. setInterval(function() {
  54. Dialog.update();
  55. }, 1000);
  56.  
  57. Dialog.add('alert-info', 'elo', 2);
  58. Dialog.add('alert-success', 'elo 2', 2);
  59. Dialog.add('alert-error', 'elo 3', 2);
  60. Dialog.add('alert-info', 'elo 4', 2);


Ogólnie chyba działa.
markuz
Proponuję dodac do Dialog zmienną o nazwie last(int) i jeżeli last === i w metodzie display to wtedy nic sie nie dzieje (tylko sie odejmuje czas).
Zainspirowałeś mnie do napisania prostej biblioteki do obsługi wiadomości.

[JAVASCRIPT] pobierz, plaintext
  1. function Message(_content, _time) {
  2.  
  3. var _this = this;
  4.  
  5. this.private = {};
  6. this.private.content = null;
  7. this.private.time = 0;
  8. this.private.firstTime = 0;
  9.  
  10. this.public = {};
  11.  
  12. this.public.isFirst = function() {
  13. return (_this.private.time === _this.private.firstTime);
  14. };
  15.  
  16. this.public.isLast = function() {
  17. return (_this.private.time === 1);
  18. };
  19.  
  20. this.public.getContent = function() {
  21. return _this.private.content;
  22. };
  23.  
  24. this.public.getTime = function() {
  25. return _this.private.time;
  26. };
  27.  
  28. this.public.setContent = function(content) {
  29. if(content === undefined) return false;
  30. _this.private.content = content;
  31. };
  32.  
  33. this.public.setTime = function(time) {
  34. if(time === undefined) return false;
  35. if(_this.private.firstTime === 0) _this.private.firstTime = time;
  36. _this.private.time = time;
  37. };
  38.  
  39. this.public.setContent(_content);
  40. this.public.setTime(_time);
  41.  
  42. return this.public;
  43.  
  44. };
  45.  
  46. function Messages() {
  47.  
  48. var _this = this;
  49.  
  50. this.public = {};
  51.  
  52. this.private = {};
  53. this.private.data = [];
  54. this.private.last = 0;
  55.  
  56. this.private.timer = setInterval(function(){
  57. _this.public.update();
  58. }, 1000);
  59.  
  60. this.public.add = function(message) {
  61. _this.private.data.push(message);
  62. };
  63.  
  64. this.public.display = function(message) {
  65.  
  66. };
  67.  
  68. this.public.update = function() {
  69. for(var i = 0; i < _this.private.data.length; i++) {
  70. if(_this.private.data[i] === undefined) continue;
  71. var message = _this.private.data[i];
  72. if(message.getTime() <= 0) continue;
  73. _this.public.display(message);
  74. var time = message.getTime();
  75. time--;
  76. message.setTime(time);
  77. break;
  78. }
  79. };
  80.  
  81. return this.public;
  82.  
  83. };
  84.  
  85. var errors = new Messages();
  86.  
  87. errors.display = function(message) {
  88.  
  89. if(message.isFirst()) {
  90. console.log('first');
  91. }
  92.  
  93. console.log(message.getContent());
  94.  
  95. if(message.isLast()) {
  96. console.log('last');
  97. }
  98. };
  99.  
  100. errors.add(new Message('Hello world!', 5));
  101. errors.add(new Message('Hello world 2!', 5));
[JAVASCRIPT] pobierz, plaintext


Dla każdego rodzaju (success, error itp.) tworzysz nową instancję Messages. Potem podmieniasz metodę publiczną display i możesz rozpocząć animację wejścia jeżeli message.isFirst(), rozpocząć animację wyjścia jeżeli message.isLast() itp.
KotWButach
Ojej dzięki smile.gif Będę się zaczytywał i uczył widzę i uczył smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.