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();
Comments
Post a Comment