javascript - Gmail-like countdown timer not working -
i've been trying recreate countdown timer similar 1 gmail uses when disconnected internet. ajax request fails begin short countdown makes ajax request , if fails again begin longer countdown , forth. once determined countdown value reached (lets 1 minute), countdown maintained @ 1 minute until internet connection recovered or servers comes back.
i don't want use plugin because code embedded in micro-controller has limited space , prefer not place external file practical reasons, though jquery library external.
everything should trigger onload
, , continue automatically (i.e. no control inputs used).
so far i've developed code want if ajax request succeeds or fails if there latency on ajax request status (as example having server down) browser won't produce immediate result , code fails.
i know stated above because took server down , been firebug on mozilla firefox see ajax result (success or failure) wasn't triggered keep waiting several seconds.
help please!
html code:
<div id='tempfail' ></div>
jquery code:
$(document).ready(function() { //do when dom ready - http://api.jquery.com/ready/ var timerspeed = [1000, 5000, 10000, 20000, 30000, 60000]; // current time in ms since 1/1/1970, plus initial reload interval var end = (new date).gettime() + timerspeed[1]; var n=0; var m=0; setinterval(function() { var = (new date).gettime(); // current time left re-load in seconds, goes negative values, see below var secleft = math.floor(( end - ) / 1000); // if secleft negative multiply zero...equal secleft=0, produce error of 1 second approximately var timetoload = (secleft < 0) ? secleft * 0 : secleft; if (n!=0) { //check failed or delayed request\n\ $('#tempfail').html('failed or delayed response. auto load in: '+timetoload+ ' seconds!'); } if( (secleft)<=0)// if reload time reached { if (m==0)//used prevent multiple continue reloads when ajax request status not yet defined { m=1; $.getscript('script_vars.js').done(function (data) { //if request succeeded m=0; n = 0; end = (new date).gettime() + timerspeed[1]; // time load after initial interval set above $('#tempfail').html(''); //other code on success here }) .fail(function() { //if request failed m=0; n ++; if(n==6) n=5; switch(n){ //timer delay failed request\n\ case 1: end = (new date).gettime() + timerspeed[1]; break; case 2: end = (new date).gettime() + timerspeed[2]; break; case 3: end = (new date).gettime() + timerspeed[3]; break; case 4: end = (new date).gettime() + timerspeed[4]; break; case 5: end = (new date).gettime() + timerspeed[5]; break; } }); } } }, 1000); });
you asked example i've written following, may want wrap contents of function within function can repeat it/don't have worry namespaces/etc. didn't test don't expect bug free!
using window.settimeout
every action, separated each stage it's own function code paths can more followed.
$(document).ready(function () { // http://api.jquery.com/ready/ var $tempfail = $('#tempfail'), delay = [1000, 5000, 10000, 20000, 30000, 60000], delay_index = 0, delay_ends = 0, inform_user_ref = null, inform_user = function inform_user() { var = (new date).gettime(), delta; // difference, calculate later if (delay_ends > now) { // if we're waiting retry delta = math.floor((delay_ends - ) / 1000); // calculate time wait $tempfail.html('failed or delayed response. auto load in: '+delta+ ' seconds!'); // let people know window.settimeout(inform_user, 200); // loop countdown timer // can fast refresh it's countdown } }, get_success = function () { $tempfail.html(''); // .. code on success }, get_fail = function () { delay_index < 5 && ++delay_index; // increment delay_index get_initialise(); // retry window.cleartimeout(inform_user_ref); // remove old countdown timer inform_user_ref = inform_user(); // , display new countdown }, get_try = function () { $.getscript('script_vars.js') .done(get_success) .fail(get_fail); }, get_initialise = function () { delay_ends = (new date).gettime() + delay[delay_index]; window.settimeout(get_try, delay[delay_index]); // retry }; get_initialise(); // initial });
Comments
Post a Comment