Make a jquery function wait till it's previous call has been resolved

Question

So, I\'ve searched for this high and low and maybe I\'m just having trouble understanding jQuery\'s deferred function or I\'m completely on the wrong track. So any help woul

Answer 1

Edit, Updated

Try

(function ($) {

    $.fn.messager = messager;

    function messager(message, speed, callback) {

        var that = $(this);
        if (that.data("queue") === undefined) {
            $.fx.interval = 0;
            that.data("queue", []);
            that.data("msg", []);
        };
        var q = that.data("queue"),
            msgs = that.data("msg");
        q.push([message, speed, callback]);
        msgs.push(message);

        var fn = function (m, s, cb) {

            return that.fadeOut(s, function () {
                that.text(m)
            })
                .delay(s)
                .fadeIn(s, cb)
                .promise("fx")
                .done(function (el) {
                console.log("callback", q.length);

                if (q.length > 1) {
                    q.splice(0, 1);
                    fn.apply(el, q[0])
                } else {
                    el.data("queue", []);
                    console.log("done", el.data("queue").length);
                    always(promise, ["complete", msgs])
                        .then(complete);
                }
                return el.promise("fx");
            })
        }

        , promise = $.when(!that.queue("fx").length 
                               ? fn.apply(that, q[0]) 
                               : that.promise("fx"))

        , always = function (elem, args) {
            if (elem.state() === "pending") {
                console.log(elem.state(), args)
            } else {
                if (elem.state() === "resolved") {
                    elem.done(function (elem) {
                        console.log(msgs.length + " messages complete");
                    })
                };
            };
            return elem.promise("fx")
        };

        always(promise, ["start", message, q.length]);

        return that
    };
}(jQuery));

See .promise()

(function ($) {

    $.fn.messager = messager;

    function messager(message, speed, callback) {
        
        var that = $(this);
        if (that.data("queue") === undefined) {
            $.fx.interval = 0;
            that.data("queue", []);
            that.data("msg", []);
        };
        var q = that.data("queue"),
            msgs = that.data("msg");
        q.push([message, speed, callback]);
        msgs.push(message);

        var fn = function (m, s, cb) {

            return that.fadeOut(s, function () {
                that.text(m)
            })
                .delay(s)
                .fadeIn(s, cb)
                .promise("fx")
                .done(function (el) {
                console.log("callback", q.length);

                if (q.length > 1) {
                    q.splice(0, 1);
                    fn.apply(el, q[0])
                } else {
                    el.data("queue", []);
                    console.log("done", el.data("queue").length);
                    always(promise, ["complete", msgs])
                        .then(complete);
                }
                return el.promise("fx");
            })
        }
        
        , promise = $.when(!that.queue("fx").length 
                               ? fn.apply(that, q[0]) 
                               : that.promise("fx"))

        , always = function (elem, args) {
            if (elem.state() === "pending") {
                console.log(elem.state(), args)
            } else {
                if (elem.state() === "resolved") {
                    elem.done(function (elem) {
                        console.log(msgs.length + " messages complete");
                    })
                };
            };
            return elem.promise("fx")
        };

        always(promise, ["start", message, q.length]);

        return that
    };
}(jQuery));

            var complete = function() {
                if (!$("pre").is("*")) {
                    $("body").append("
" + JSON.stringify($(this).data("msg"), null, 4))
                } else {
                    $("pre")
                    .text(JSON.stringify($(this).data("msg"), null, 4));  
                    $("label[for=messages]").text("messages updated")
                    .show(0).delay(350).hide(0)
                };
            };
    
    var fx = function() {
        $(this).css("color", "purple").animate({
            fontSize: "72"
        }, 100, function() {
            $(this).animate({
                fontSize: "36"
            }, 100, function() {
                $(this).css("color", "inherit")
            })
        })
    };
    
    var input = $("input");
    
    var $elem = $("#messages");
    $elem.messager("0", 1000)
    
    .messager("1", 100)
    .messager("2", 200)
    .messager("3", 300)
    .messager("4", 400)
    .messager("5", 500)
    .messager("6", 600)
    .messager("7", 700)
    .messager("8", 800)
    .messager("9", 900);
    
    $.each("abcdefghijklmnopqrstuvwxyz".split(""), function(key, val) {
        $elem.messager(val, 200, fx);
    });
    
    $("button").on("click", function() {
        $elem.messager(input.val().length > 0 ? input.val() : $.now(), 200);
        input.val("")
    });
#messages {
    display:block;
    height:38px;
    font-size:36px;
    position : absolute;
}

label[for=messages] {
    color:blue;
}

pre {
  position:relative;
}

add messages 

click


messages