JSFiddle - React, Tailwind, and code Playground

http://stackoverflow.com/questions/26454687/is-there-a-way-to-control-flow-of-promises-in-linear-call-order

by guest271314

HTML

<div>click</div>
<button>unbind</button>
<button>stop</button>

JavaScript

var selected = $("div"),
    button = $("button:first"),
    stop = $("button:last");
(function ($) {
    $.fn.blink = blink;
    function blink(d, count) {
        var el = $(this);
        $.fx.interval = 0;
        return el.each(function (i, elem) {
            var elem = $(elem);
            elem.data("count", count);
            return elem.fadeTo(d, "0", "linear", function () {
                elem.fadeTo(d, "1", "linear", function () {
                    elem.data("count", --count);
                    return (elem.data("count") !== 0 && !elem.data("stop") ? elem.blink(d, elem.data("count")) : elem.stop(true, true).data("stop", false))
                })
            })
        }).promise("fx")
    };
}(jQuery));

selected.on("click", function (e) {
    $(this).blink(750, 10).then(function (el) {
        console.log(el, el.queue(), el.data());
    })
});
button.on("click", function () {
    selected.unbind('click')
    .promise().then(function (el) {
        el.fadeOut(500);
    });
});
stop.on("click", function () {
    selected.data("count", null).data("stop", true).clearQueue()
})