FutureJS/demo_future.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
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Future demo</title>
    <script src="future.js"></script>
</head>
<body>
<h3>Future demo</h3>
<p>
    <input type="button" id="test1" value="TEST 1: Success"/>
    <input type="button" id="test2" value="TEST 2: Error"/>
    <input type="button" id="test3" value="TEST 3: Cancel"/>
    <input type="button" id="test4" value="TEST 4: All events"/>
    <input type="button" id="test5" value="TEST 5: Multiple listeners"/>
</p>
<p>
    Open the dev tools to see the console debug output.
</p>
<script>
    var asynchronousProcessSuccess, asynchronousProcessError, asynchronousProcessCancel;

// TEST 1
    document.getElementById("test1").addEventListener("click", function() {
        var future = asynchronousProcessSuccess(); // The asynchronous process will return a Future object
        future.onSuccess(function(future, payload) {
            alert("SuccessListener triggered. Payload: "+payload);
        });
    });

// TEST 2
    document.getElementById("test2").addEventListener("click", function() {
        var future = asynchronousProcessError(); // The asynchronous process will return a Future object
        future.onError(function(future, error) {
            alert("ErrorListener triggered: "+error.message);
        });
    });

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

// TEST 4
    document.getElementById("test4").addEventListener("click", function() {
        var future = asynchronousProcessSuccess(); // The asynchronous process will return a Future object
        future.onSuccess(function(future, payload) {
            alert("SuccessListener triggered");
        });
        future.onError(function(future, error) {
            alert("ErrorListener triggered: "+error.message);
        });
        future.onCancel(function(future) {
            alert("CancelListener triggered");
        });
        future.onComplete(function(future) {
            alert("CompleteListener triggered");
        });
    });

// TEST 5
    document.getElementById("test5").addEventListener("click", function() {
        var future = asynchronousProcessSuccess();
        future.onSuccess(function(future, payload) {
            alert("SuccessListener #1 triggered");
        });
        future.onSuccess(function(future, payload) {
            alert("SuccessListener #2 triggered");
        });
        future.onComplete(function(future) {
            alert("CompleteListener #1 triggered");
        });
        future.onComplete(function(future) {
            alert("CompleteListener #2 triggered");
        })
    });

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

</body>
</html>