javascript - Keeping track and handling multiple Ajax calls -
imagine table 4 accordion tabs hidden on each row. when row clicked/expanded 4 ajax calls fired load data accordion tabs.
tab 1 , 2 loads 3 , 4 takes lot longer time. when row expanded, same 4 ajax calls fired. if minimize other row want abort ongoing ajax calls specific row, still load in data new row.
i have gotten working when working on 1 row @ time, if have ongoing calls , minimize row , ajax call 3 , 4 not done previous row, calls gets aborted on newly expanded row.
simplified code:
var openrows = []; var abort = false; var ajax1, ajax2, ajax3, ajax4; $(document).on("click", '.details-control', function (e) { var id = $(this).closest('tr').attr('id'); if ($.inarray(id, openrows) > -1) { openrows.splice(openrows.indexof(id), 1); abort = true; } else { openrows.push(id); abort = false; } if (abort) { console.log("aborting ajax"); if (ajax1 && ajax1.readystate != 4) { ajax1.abort(); } if (ajax2 && ajax2 .readystate != 4) { ajax2.abort(); } etc... } else { ajax1 = $.ajax({ ... }); ajax2 = $.ajax({ ... }); etc... });
so it's pretty easy understand why ongoing calls gets aborted when minimize row how can solve best way? use array ajax calls? or include id in ajax call variable somehow?
you store ajax calls in array mapped row index abort right one. however, storing these references ajax these rows may lead memory leaks.
why have abort them?
Comments
Post a Comment