FutureJS/demo_futuregroup.html at master · rmruano/FutureJS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>FutureGroup demo</title>
    <script src="future.js"></script>
</head>
<body>
<h3>FutureGroup demo</h3>
<p>
    <input type="button" id="test1" value="TEST 1: 2 Success"/>
    <input type="button" id="test2" value="TEST 2: 1 Success + 1 Error"/>
    <input type="button" id="test3" value="TEST 3: 1 Success + 1 Cancel"/>
    <input type="button" id="test4" value="TEST 4: 1 Success + 1 Error + 1 Cancel"/><br/>
    <input type="button" id="test5" value="TEST 5: 1 Success + 1 Success closure"/>
    <input type="button" id="test6" value="TEST 6: 1 Success + 1 Error + 2 Errors closures"/>
    <input type="button" id="test7" value="TEST 7: 2 Success with autoReady disabled"/>
</p>
<p>
    Open the dev tools to see the console debug output.
</p>
<script>
    var asynchronousComplexProcessSuccess, asynchronousComplexProcessError, asynchronousComplexProcessCancel, asynchronousProcessSuccess, asynchronousProcessError, asynchronousProcessCancel;

// TEST 1
    document.getElementById("test1").addEventListener("click", function() {
        var futureGroup = asynchronousComplexProcessSuccess(); // The asynchronous process will return a FutureGroup object
        futureGroup.onSuccess(function(futureGroup) {
            alert("SuccessListener triggered");
        });
    });

// TEST 2
    document.getElementById("test2").addEventListener("click", function() {
        var futureGroup = asynchronousComplexProcessError(); // The asynchronous process will return a FutureGroup object
        futureGroup.onError(function(futureGroup, lastError, errorsList) {
            alert("ErrorListener triggered: "+lastError.message);
        });
    });

// TEST 3
    document.getElementById("test3").addEventListener("click", function() {
        var futureGroup = asynchronousComplexProcessCancel(); // The asynchronous process will return a FutureGroup object
        futureGroup.onCancel(function(futureGroup) {
            alert("CancelListener triggered");
        });
    });

// TEST 4
    document.getElementById("test4").addEventListener("click", function() {
        // To keep it simple and avoid more global functions the future group is created here
        var futureGroup = new FutureGroup()
                .enableDebug()
                .add(asynchronousProcessSuccess())
                .add(asynchronousProcessError())
                .add(asynchronousProcessCancel());
        // Listeners
        futureGroup.onSuccess(function(futureGroup) {
            alert("SuccessListener triggered");
        });
        futureGroup.onError(function(futureGroup, lastError, errorsList) {
            alert("ErrorListener triggered: "+lastError.message);
        });
        futureGroup.onCancel(function(futureGroup) {
            alert("CancelListener triggered");
        });
        futureGroup.onComplete(function(futureGroup) {
            alert("CompleteListener triggered");
        });
    });

// TEST 5
    document.getElementById("test5").addEventListener("click", function() {
        // To keep it simple and avoid more global functions the future group is created here
        var futureGroup = new FutureGroup()
                .enableDebug()
                .add(asynchronousProcessSuccess())
                .add(function() {return true;});
        // Listeners
        futureGroup.onSuccess(function(futureGroup) {
            alert("SuccessListener triggered");
        });
    });

// TEST 6
    document.getElementById("test6").addEventListener("click", function() {
        // To keep it simple and avoid more global functions the future group is created here
        var futureGroup = new FutureGroup()
                .enableDebug()
                .add(asynchronousProcessSuccess().onSuccess(function(future,payload){
                    /* We can add listeners to the futures as well with the fluent interface */
                    alert("Process asynchronousProcessSuccess( completed successfully: "+payload);
                }))
                .add(asynchronousProcessError())
                .add(function() {return false;} /* No error msg */)
                .add(function() {throw new Error("Closure launched exception!")} /* Custom error */);
        // Listeners
        futureGroup.onError(function(futureGroup, lastError, errorsList) {
            var i, j, errors = [];
            for (i=0,j=errorsList.length;i<j;i++) {
                errors.push(errorsList[i].message);
            }
            alert("ErrorListener triggered: "+errors.join(", "));
        });
    });

// TEST 7
    document.getElementById("test7").addEventListener("click", function() {
        // To keep it simple and avoid more global functions the future group is created here
        var futureGroup = new FutureGroup()
                .enableDebug()
                .disableAutoReady();
        // Listeners
        futureGroup.onSuccess(function(futureGroup) {
            alert("SuccessListener triggered");
        });
        // ... application doing things #1 ...
        setTimeout(function() {
            futureGroup.add(asynchronousProcessSuccess());
        },500);
        // ... application doing things #2 ...
        setTimeout(function() {
            futureGroup.add(asynchronousProcessSuccess());
        },1000);
        // ... ok, all futures have been added, evaluate them ...
        setTimeout(function() {
            futureGroup.ready();
        },1500);
    });


// Asynchronous complex processes simulators that return future groups ----------------------
    asynchronousComplexProcessSuccess = function() {
        var futureGroup = new FutureGroup();
        futureGroup.enableDebug();
        /* Add multiple future validations */
        futureGroup
                .add(asynchronousProcessSuccess())
                .add(asynchronousProcessSuccess());
        return futureGroup;
    };
    asynchronousComplexProcessError = function() {
        var futureGroup = new FutureGroup();
        futureGroup.enableDebug();
        /* Add multiple future validations */
        futureGroup
                .add(asynchronousProcessSuccess())
                .add(asynchronousProcessError());
        return futureGroup;
    };
    asynchronousComplexProcessCancel = function() {
        var futureGroup = new FutureGroup();
        futureGroup.enableDebug();
        /* Add multiple future validations */
        futureGroup
                .add(asynchronousProcessSuccess())
                .add(asynchronousProcessCancel());
        return futureGroup;
    };

// Asynchronous processes simulators -----------------------------------------
    asynchronousProcessSuccess = function() {
        var future = new Future();
        //future.enableDebug(); // No debug, we're testing FutureGroups
        setTimeout(function() {
            future.success("My payload");
        }, 1000); // Asynchronous simulation
        return future;
    };
    asynchronousProcessError = function() {
        var future = new Future();
        //future.enableDebug(); // No debug, we're testing FutureGroups
        setTimeout(function() {
            future.error(new Error("Something went wrong!"));
        }, 1000); // Asynchronous simulation
        return future;
    };
    asynchronousProcessCancel = function() {
        var future = new Future();
        //future.enableDebug(); // No debug, we're testing FutureGroups
        setTimeout(function() {
            future.cancel();
        }, 1000); // Asynchronous simulation
        return future;
    };
</script>

</body>
</html>