javascript - for loops with callback functions in jQuery or how to avoid them -
i have small animation in jquery needs show words , non-words determined amount of time in milliseconds upon click.
var arr = ['goat', 'beaver', 'tiger', 'elephant', 'fox', 'bear', 'bee', 'cat', 'dog', 'mouse', 'lion', 'fish', 'shrimp', 'hen', 'goose', 'cow', 'crocodile', 'deer', 'moose', 'hippopotamus', 'wolf', 'raccoon', 'hare', 'otter', 'dolphin', 'whale', 'chick']; var narr = ['reqxarde', 'yorstdaj', 'awqpqqqr', 'fjsjajaa', 'qqwpeeet', 'alaloiye', 'bouilaarw', 'nvosaqeww', 'wartydios', 'suparwliss', 'wqqqapxxx', 'ooosaaoea', 'ssiudhfww', 'awwweipp', 'aazxdoup', 'surpaaarj', 'aaldjwwa', 'weejsysj', 'reqxarde', 'yorstdaj', 'awqpqqqr', 'fjsjajaa', 'qqwpeeet', 'alaloiye', 'bouilaarw']; var key = ['jquery', 'javascript', 'css3', 'stackoverflow', 'html5', 'animation']; /* selects random value each array */ function narr_val() { return narr[math.floor(math.random() * narr.length)]; } function arr_val() { return arr[math.floor(math.random() * arr.length)]; } function key_val() { return key[math.floor(math.random() * key.length)]; } $( "#foo" ).bind("click tap", function(){ $("#foo").unbind( "click" ); //block 0 $('#foo').fadein(1).delay(500).html('attention!').fadeout(1,function(){ $('#foo').fadein(1).delay(500).html('in 3...').fadeout(1,function(){ $('#foo').fadein(1).delay(500).html('2...').fadeout(1,function(){ $('#foo').fadein(1).delay(500).html('1...').fadeout(1,function(){ $('#foo').fadein(1).delay(500).html('go!').fadeout(1,function(){ //block 1 $('#foo').fadein(1).delay(175).html(narr_val()).fadeout(1,function(){ $('#foo').fadein(1).delay(40).html(key_val()).fadeout(1,function(){ $('#foo').fadein(1).delay(175).html(narr_val()).fadeout(1,function(){ $('#foo').fadein(1).delay(320).html(arr_val()).fadeout(1,function(){ $('#foo').fadein(1).delay(40).html(narr_val()).fadeout(1,function(){ //block 2 $('#foo').fadein(1).delay(175).html(narr_val()).fadeout(1,function(){ $('#foo').fadein(1).delay(40).html(key_val()).fadeout(1,function(){ $('#foo').fadein(1).delay(175).html(narr_val()).fadeout(1,function(){ $('#foo').fadein(1).delay(320).html(arr_val()).fadeout(1,function(){ $('#foo').fadein(1).delay(40).html(narr_val()).fadeout(1,function(){ etc...there version 27 blocks , 1 40. working example here
}); }); }); }); }); }); }); }); }); }); }); }); }); }); }); }); my questions: 1) other way of doing instead of using embedded callback functions? 2) way write syntax loop or avoid writing 27 blocks of callback functions?
another approach use built in queuing capability creating .html call can queued (see jquery .queue more information):
function queuedhtml(html) { return function () { $(this).html(html); $(this).dequeue(); }; } this can adjusted use named queue rather default queue.
once you've done this, can adjust code this:
$("#foo").bind("click tap", function () { var $foo = $("#foo"); $foo.unbind("click"); $foo.fadein(1).delay(500).queue(queuedhtml('attention!')).fadeout(1) .fadein(1).delay(500).queue(queuedhtml('in 3...')).fadeout(1) .fadein(1).delay(500).queue(queuedhtml('2...')).fadeout(1) .fadein(1).delay(500).queue(queuedhtml('1...')).fadeout(1) .fadein(1).delay(500).queue(queuedhtml('go!')).fadeout(1); (var = 0; < 27; ++i) { $foo.fadein(1).delay(175).queue(queuedhtml(narr_val())).fadeout(1) .fadein(1).delay(40).queue(queuedhtml(key_val())).fadeout(1) .fadein(1).delay(175).queue(queuedhtml(narr_val())).fadeout(1) .fadein(1).delay(320).queue(queuedhtml(arr_val())).fadeout(1) .fadein(1).delay(40).queue(queuedhtml(narr_val())).fadeout(1); } $foo.fadein(1).queue(queuedhtml('terminated')); }); you can reduce code bit further refactoring out of repetitive logic - example:
function addtoqueue($el, html, delay) { $el.fadein(1).delay(delay).queue(queuedhtml(html)).fadeout(1); } $("#foo").bind("click tap", function () { var $foo = $("#foo"); $foo.unbind("click"); addtoqueue($foo, 'attention!', 500); addtoqueue($foo, 'in 3...', 500); addtoqueue($foo, '2...', 500); addtoqueue($foo, '1...', 500); addtoqueue($foo, 'go!', 500); (var = 0; < 27; ++i) { addtoqueue($foo, narr_val(), 175); addtoqueue($foo, key_val(), 40); addtoqueue($foo, narr_val(), 175); addtoqueue($foo, arr_val(), 320); addtoqueue($foo, narr_val(), 40); } $foo.fadein(1).queue(queuedhtml('terminated')); }); or reduce further bit more refactoring:
$("#foo").bind("click tap", function () { var $foo = $("#foo"); $foo.unbind("click"); $.each(['attention', 'in 3...', '2...', '1...', 'go!'], function(idx, val) { addtoqueue($foo, val, 500); }); var delays = [175, 40, 175, 320, 40]; (var = 0; < 27; ++i) { $.each([narr_val(), key_val(), narr_val(), arr_val(), narr_val()], function(idx, val) { addtoqueue($foo, val, delays[idx]); }); } $foo.fadein(1).queue(queuedhtml('terminated')); });
Comments
Post a Comment