JSFiddle - React, Tailwind, and code Playground

by kazu69

HTML

<p>resolveをクリックするとresolve()、rejectをクリックするとreject()</p>
    <button data-state="resolve">resolve</button> <button data-state="reject">reject</button>
    <hr>

JavaScript

var count = 0;
        var pubState = function(msg){
            $('body').append('<br>').append(msg);
        }

        var df = $.Deferred();

        df
        //unresolved -> pending -> resolved or rejected へと遷移する
        //一度、 オブジェクトが、resolved または rejected な状態に入ると、その状態を維持する。
        //常時実行される
        .always(pubState('always'))

        //成功時に実行される
        .done(function(msg){pubState(msg)})
        //失敗時に実行される
        .fail(function(msg){pubState(msg)})
        //経過中に実行される
        .progress(function(msg){pubState(msg)});

        $(function(){
            $('button').on('click',function(){
                count ++;
                if(2 >= count) {
                    //強制的にprogressを呼び出す
                    df.notify('notify');
                }
                else {
                    var state = $(this).data('state');
                    if('resolve' == state) {
                        //強制的にdoneを呼び出す
                        df.resolve('resolve');
                    }
                    else {
                        //強制的にfailを呼び出す
                        df.reject('reject');
                    }
                    $('button').attr({'disabled': 'disabled'});
                }
                pubState('state:' + df.state());

            })
        });