javascript - Execution order bahaviour -

i'm writing function upon call should populate page tiles. data on tiles acquired remote db (hence ajax request). i'm using jquery 3.0 in code.

here function:

function populatedashboard() {     var tileblueprint = '<div class="dashboard_tile">\                     <div class="dashboard_tile_content">\                         <table class="tile_table">\                             <tr class="tile_title">\                                 <td>$title</td>\                             </tr>\                             <tr class="tile_data">\                                 <td>$value</td>\                             </tr>\                         </table>\                     </div>\                 </div>';  $.ajax({         url: 'http://' + appvar.serverurl + '/restapi/dashboard_getdata',         type: 'post',         data: json.stringify({             'sessionid': appvar.sessionid         }),         datatype: 'json',         contenttype: "application/json",         success: function (data) {             if (data.resultcode === '0') {                 //current tiles wiped                 $('.dashboard_tile').fadeout(100, function () {                     $(".tile_handler").empty();                     console.log("1 - " + date.now())                 });                  //new tiles parsed , data injected string represents tile                 //tiles saved array                 var json = $.parsejson(data.tiledata);                 var tilearr = [];                 $.each(json.tiles, function (index, element) {                     tile = tileblueprint.replace("$title", $.i18n("dashboard-" + element.title));                     tile = tile.replace("$value", element.value);                     tilearr[index] = tile;                     console.log("2 - " + date.now())                 });                  //now loop trough created array populate page                 $.each(tilearr, function (index, element) {                     settimeout(function () {                         $(element).hide().appendto(".tile_handler").fadein(1000);                     }, 1000 * index); //delay made longer see effect better                     console.log("3 - " + date.now())                 });             } else {                 ons.notification.alert($.i18n('error-retriving_data_problem'));                 return;             }         },         error: function (request, error) {             ons.notification.alert($.i18n('error-conn_error'));             return;         }     }); } 

i don't think html getting injected relevat part working fine.

the problem fadeout , both each loops called upon success, callout out of order. tried log time @ each executed , get:

//first run 2 - 1469707068268 (6 times) 3 - 1469707068269 (6 times) //second run 2 - 1469707181179 (2 times) 2 - 1469707181180 (3 times) 2 - 1469707181181 3 - 1469707181181 3 - 1469707181182 (4 times) 3 - 1469707181183 1 - 1469707181283 1 - 1469707181284 (2 times) 1 - 1469707181285 (2 times) 1 - 1469707181286 

i'm displaying 6 tiles, comments 2 , 3 should fire 6 times , 1 once.

• why doesn't 1 execute first?

• why 1 executed 6 times? edit: figured 1 myself now.

• if 1 executed last, why doesn't delete tiles created before?

another problem first time displays 6 tiles, second (and onwards), displays 5 tiles (first missing).

anyone can me explain going on , how can avoid such bahaviour?

thank you.

why doesn't 1 execute first , why 1 executed 6 times?

from documentation .fadeout, second parameter "a function call once animation complete, called once per matched element".

so in case function called after ~100ms (the delay provide first parameter) , called 6 times (once each matched element).

if 1 executed last, why doesn't delete tiles created before?

as seen above, 1 run after 100ms. however, actual nodes added after 1000 * index ms:

settimeout(function () {     $(element).hide().appendto(".tile_handler").fadein(1000); }, 1000 * index); 

so first node code appending node run after 1. however, first node (note: index of 0 => 1000 * 0 = 0ms delay), appendto code run directly means in fact removed when .empty() called after 100ms, means see 5 of 6 nodes.

the solution these problems somehow "synchronize" code runs in way expect to. callbacks used for, put code want run after completed callback function. in case, 1 solution move "adding" code fadeout callback:

$('.dashboard_tile').fadeout(100).promise().done(function () {     $(".tile_handler").empty();     var json = $.parsejson(data.tiledata);     var tilearr = [];     $.each(json.tiles, function (index, element) {         tile = tileblueprint.replace("$title", $.i18n("dashboard-" + element.title));         tile = tile.replace("$value", element.value);         tilearr[index] = tile;     });     // ... }); 

notice usage of .promise.done, gives single callback once elements have finished animating instead of 1 each element.