Wait for Element

by Patrick Hund

HTML

<button>click to create new element</button>
<div id="console"></div>

CSS

body {
}

#console {
    padding: 10px;
    height: 320px;
    background-color: black;
    font-family: monospace;
    color: lime;
}

JavaScript

$(document).ready(function () {
        
    var print = function (text) {
        $("#console").append(text + "<br>");
    };
    
    print("waiting for new element");
    
    var waitForElement = function () {
        var deferred = $.Deferred(), 
            counter = 0;
        
        var interval = window.setInterval(function () {
            if (++counter > 10) {
                print("maximum attempts reached");
                deferred.reject();
                window.clearInterval(interval);
                return;
            }
            
            print("attempt " + counter + " of 10");
            
            var $new = $("#new");
            
            if ($new.length > 0) {
                print("new element found");
                deferred.resolve($new);
                window.clearInterval(interval);
            }
        }, 1000);
        
        return deferred;
    }
    
    var $button = $("button");
    
    $button.on("click", function () {
        $button.after("<div id=\"new\">New!</div>");
        $button.attr("disabled", "disabled");
    });
    
    var test = waitForElement();
    
    test.done(function ($new) {
        $new.css("background-color", "green");
        print("done");
    });
        
    test.fail(function () {
        print("fail");
    })
    
    test.always(function () {
        $button.attr("disabled", "disabled");
    });
    
});