[JavaScript][JQuery] asynchroniczność oraz wywołanie funkcji kilka razy Opcje

[KotWButach]

Witam

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

[PHP] pobierz, plaintext 
 
    Alert.box('error', msg, 5);
    Alert.box('info', msg, 5);
 
    // [.. leci sobie kod leci ...]
 
    Alert.box('success', msg, 10);
 
[PHP] pobierz, plaintext 

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.

Ten post edytował KotWButach 8.08.2014, 13:15:52

[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.

[HTML] pobierz, plaintext 
aaa(1, function(){
 bbb(1);
});
[HTML] pobierz, plaintext 

[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.

Ten post edytował KotWButach 8.08.2014, 13:27:25

[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.

Ten post edytował markuz 8.08.2014, 13:36:44

[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ś 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))

Ten post edytował markuz 8.08.2014, 13:50:44

[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.

Ten post edytował markuz 8.08.2014, 13:52:50

[KotWButach]

Dziękuje Ci za odpowiedzi Jeżeli wiesz jeszcze może gdzie o tym poczytać

[markuz]

https://developer.mozilla.org/en-US/docs/We...nted_JavaScript

[KotWButach]

Ale i tak pojawił mi się problem ponieważ funkcja jest wykonywana co sekundę więc tyle razy widzę animacje

[markuz]

A skąd ja mogę wiedzieć jak ty to wywołujesz? Nie chcesz pokazać kodu a potem narzekasz ;d

[KotWButach]

[PHP] pobierz, plaintext 
var Dialog = {
    data: [],
    add: function(type, text, seconds) {
        this.data.push({
            type: type,
            text: text,
            seconds: seconds
        });
    },
    display: function(i) {
        if (this.data[i] === undefined)
            return false;
        var quene = this.data[i];
        if (quene.seconds <= 0)
            return false;
        quene.seconds--;
        this.data[i].seconds = quene.seconds;
        var type = quene.type;
        var content = quene.text + ' (' + quene.seconds + ')';
 
        $('.alert').removeClass('alert-info');
        $('.alert').removeClass('alert-success');
        $('.alert').removeClass('alert-error');
        $('.alert').css('display', 'block');
 
        $('.alert').addClass(type);
 
        document.querySelector('.alert p').innerHTML = content;
 
        if (quene.seconds === 0) {
            $('.alert').hide("slide", {direction: "down"}, 1000);
        }
 
    },
    update: function() {
        for (var i = 0; i < this.data.length; i++) {
            if (this.data[i] === undefined)
                continue;
            if (this.data[i].seconds === 0)
                continue;
 
 
            this.display(i);
 
            //$('.alert').hide("slide", { direction: "down" }, 1000);
            break;
        }
        ;
    }
 
};
Dialog.add('alert-info', 'elo 54', 2);
setInterval(function() {
    Dialog.update();
}, 1000);
 
Dialog.add('alert-info', 'elo', 2);
Dialog.add('alert-success', 'elo 2', 2);
Dialog.add('alert-error', 'elo 3', 2);
Dialog.add('alert-info', 'elo 4', 2);
[PHP] pobierz, plaintext 

Ogólnie chyba działa.

Ten post edytował KotWButach 8.08.2014, 14:23:15

[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 
            function Message(_content, _time) {
 
                var _this = this;
 
                this.private = {};
                this.private.content = null;
                this.private.time = 0;
                this.private.firstTime = 0;
 
                this.public = {};
 
                this.public.isFirst = function() {
                    return (_this.private.time === _this.private.firstTime);
                };
 
                this.public.isLast = function() {
                    return (_this.private.time === 1);
                };
 
                this.public.getContent = function() {
                    return _this.private.content;
                };
 
                this.public.getTime = function() {
                    return _this.private.time;
                };
 
                this.public.setContent = function(content) {
                    if(content === undefined) return false;
                    _this.private.content = content;
                };
 
                this.public.setTime = function(time) {
                    if(time === undefined) return false;
                    if(_this.private.firstTime === 0) _this.private.firstTime = time;
                    _this.private.time = time;
                };
 
                this.public.setContent(_content);
                this.public.setTime(_time);
 
                return this.public;
 
            };
 
            function Messages() {
 
                var _this = this;
 
                this.public = {};
 
                this.private = {};
                this.private.data = [];
                this.private.last = 0;
 
                this.private.timer = setInterval(function(){
                    _this.public.update();
                }, 1000);
 
                this.public.add = function(message) {
                    _this.private.data.push(message);
                };
 
                this.public.display = function(message) {
 
                };
 
                this.public.update = function() {
                    for(var i = 0; i < _this.private.data.length; i++) {
                        if(_this.private.data[i] === undefined) continue;
                        var message = _this.private.data[i];
                        if(message.getTime() <= 0) continue;
                        _this.public.display(message);
                        var time = message.getTime();
                        time--;
                        message.setTime(time);
                        break;
                    }
                };
 
                return this.public;
 
            };
 
            var errors = new Messages();
 
            errors.display = function(message) {
 
                if(message.isFirst()) {
                    console.log('first');
                }
 
                console.log(message.getContent());
 
                if(message.isLast()) {
                    console.log('last');
                }
            };
 
            errors.add(new Message('Hello world!', 5));
            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.

Ten post edytował markuz 8.08.2014, 14:38:07

[KotWButach]

Ojej dzięki Będę się zaczytywał i uczył widzę i uczył