JavaScript best practices – visual feedback about long(er) running operations

by riddla

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
<div class="alert alert-info">
    <p>Doing some very important stuff ...</p>
    <div class="progress">
        <div class="bar" style="width: 1%;"></div>
    </div>
</div>

JavaScript

var $progress = $('.progress .bar');

var longRunningOperation = function() {
    var dfd = $.Deferred();
    
    var times = 50;
    var count = 1;
  
    var intervalId = setInterval(function() {
        count++;
        dfd.notify(Math.ceil(100/times)*count);
        count === times && dfd.resolve();
    }, times);
  
    return dfd.promise();
};

var promise = longRunningOperation();

promise.progress(function(prog) {
    //console.log(prog);
    $progress.css('width', prog + '%');
});

promise.done(function(prog) {
    //console.log('add-success');
    $progress.addClass('bar-success');
});