Recursive array calls one after another through promise

 data = [1,2,3,4]
rules = [
                function(d){ return d.map(x => x * 2); },
                function(d){ return d.map(x => x * 2); }
            ]
recursive(0,rules,data);



function somelongrunningprocess(rule, data){
    var d = $.Deferred();
    setTimeout(function(){ var result = rule.call(undefined,data); d.resolve(result); },1000);
    return d;
}

function recursive(index, rules, data) {
            if(index < rules.length) {
                $.when(somelongrunningprocess(rules[index],data)).then(function(response){
                    console.log("after_rule",response);    
                    //recursive((index+1), rules, data);
                    recursive((index+1), rules, response);
                });            
            }
}