javascript - Maximum call stack size exceeded - know why (too many functions) but how to fix it? -
on page have simple piece of code based on nested functions, helps me show 1 elements after in right order:
var fade = 700; $('#s2icon-center').fadein(fade, function() { $('#s2icon-1').fadein(fade, function() { $('#s2icon-3, #s2icon-9').fadein(fade, function() { $('#s2icon-6, #s2icon-11, #s2icon-17').fadein(fade, function() { $('#s2icon-5, #s2icon-14, #s2icon-19').fadein(fade, function() { $('#s2icon-8, #s2icon-13, #s2icon-22').fadein(fade, function() { $('#s2icon-2, #s2icon-16, #s2icon-21').fadein(fade, function() { $('#s2icon-4, #s2icon-10, #s2icon-24').fadein(fade, function() { $('#s2icon-7, #s2icon-12, #s2icon-18').fadein(fade, function() { $('#s2icon-15, #s2icon-20').fadein(fade, function() { $('#s2icon-23').fadein(fade); }); }); }); }); }); }); }); }); }); });
but in opinion, because of using many functions in 1 place, page getting laggy , error in console: 'uncaught rangeerror: maximum call stack size exceeded'
now question guys is, how (in easy way) can same effect more productive?
thanks in advance!
------------- edit
here how it's should look: codepen full view
and code right here: codepen demo
you can use delay()
delays execution of next function in chain specified amount of time.
var fade = 700; // id's of elements want fade var elems = ["#d1", "#d2", "#d3", "#d4", "#d5"]; // in case: // var elems = ['#s2icon-center', '#s2icon-1', '#s2icon-3, #s2icon-9', '#s2icon-6, #s2icon-11, #s2icon-17']; // , on... // loop on elements (var e = 0; e < elems.length; e += 1) { // element it's id (from array) var element = $(elems[e]); // use .delay() delay execution of fade amount // "fade * e", 0, 700, 1400, ... element.delay(fade * e).fadeout(fade); }
(note i've used fadeout()
keep example clear - you'll need change fadeout()
.
demo.
Comments
Post a Comment