Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<meta charset="utf8">
<head>
<title>Reactive Sequences + gate()</title>
</head>
<body>
<h1>Reactive Sequences + gate()</h1>
​
<table border="1" cellpadding="10">
<tr>
    <td>task 1</td>
    <td>task 2</td>
    <td>task 3</td>
</tr>
<tr>
    <td id="t1">
        <input type="button" id="btn1" value="click me"><br>
        <input type="button" id="btn1_no" value="don't click me">
    </td>
    <td id="t2">
        <input type="button" id="btn2" value="click me"><br>
        <input type="button" id="btn2_no" value="don't click me">
    </td>
    <td id="t3">
        <input type="button" id="btn3" value="click me"><br>
        <input type="button" id="btn3_no" value="don't click me">
    </td>
</tr>
</table>
​
<p id="results"></p>
​
<p>
  Built with <a href="https://github.com/getify/asynquence">asynquence</a> and the <a href="https://github.com/getify/asynquence/tree/master/contrib#react-plugin">react(..)</a> plugin, for "reactive sequences" capability.
</p>
​
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://rawnpm.getify.io/asynquence/latest/asq.js"></script>
<script src="https://rawnpm.getify.io/asynquence-contrib/latest/contrib.js"></script>
​
</body>
</html>
​
 
#t1.invalid, #t2.invalid, #t3.invalid { background-color: red; }
​
#t1.validated, #t2.validated, #t3.validated { background-color: green; }
​
#results { color:green; font-size:30px; font-weight:bold; }
 
function validateTask(btn) {
    return ASQ(function(done){
        // fake some asynchronicity
        setTimeout(function(){
            if (/^btn\d$/.test(btn.id)) {
                done(btn);
            }
            else {
                done.fail(btn);
            }
        },500);
    });
}
​
function markTaskValid(btn) {
    $(btn).closest("td").removeClass("validated invalid").addClass("validated");
}
​
function markTaskInvalid(btn) {
    $(btn).closest("td").removeClass("validated invalid").addClass("invalid");
}
​
function setupTask(btnID) {
    return function(done) {
        var rsq = ASQ.react(function(proceed,registerTeardown){
            function clickButton(evt) {
                proceed(evt.target);
            }
​
            // register event handlers for task buttons
            $("#" + btnID).click(clickButton);
            $("#" + btnID + "_no").click(clickButton);
​
            // register teardown to unbind events
            registerTeardown(function(){
                $("#" + btnID).unbind("click",clickButton);
                $("#" + btnID + "_no").unbind("click",clickButton);
                $("#" + btnID).closest("td").children("input[type='button']").attr("disabled",true);
            });
        })
        .seq(validateTask)
        .val(markTaskValid)
        .val(function(){
            rsq.stop(); // success, so stop listening
        })
        .val(done)
        .or(markTaskInvalid);
    };
}
​
​
​
ASQ()
// wait for all tasks to complete successfully
.gate(
    setupTask("btn1"),
    setupTask("btn2"),
    setupTask("btn3")
)
.val(function(){
    $("#results").text("All Tasks Complete!");
});
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
getifypro
0viewers