call function after "loop" function for multiple elements is finished in jQuery -

i've searched site solution couldn't find extract purpose.

i have 2 functions. first function fades in multiple elements in delay each other until every element faded in. want start second function after first done every element. i've tried .done(), .when() or .promise() figure out solution.

(the fiddle below way simplified show problem. site i'm working on more complex, therefor need solution calling function after function , not settimeout() or else.)

var v = $(".box"); var cur = 0;  var first = function () {      function fadeinnextli() {         v.eq(cur++).fadein(200);         if(cur != v.length) settimeout(fadeinnextli,100);     }     fadeinnextli();     return $.deferred().resolve(); };  var second = function () {     alert('done'); };  first().done(second) 

https://jsfiddle.net/c633f5w8/3/

thank in advance.

i didn't want rewrite have necessary stuff. illustrates use of fadein callback.

https://jsfiddle.net/c633f5w8/4/

var v = $(".box"); var cur = 0; var len = v.length; console.log(len); var first = function () {      function fadeinnextli() {         if(cur+1 == len){             v.eq(cur++).fadein(200,'swing',finish);         } else {         v.eq(cur++).fadein(200);               if(cur != v.length) settimeout(fadeinnextli,100);         }               /*               doesn't work               if(cur === v.length) return $.deferred().resolve();               */     }     fadeinnextli();     return $.deferred().resolve(); };  function finish() {     alert('done'); };  first();