javascript setInterval not keeping it's timing properly -

i've got multiple elements on page fade in , out on timer using javascript setinterval set them in motion. have them delayed offset create nice cascading effect, if leave page open long enough, catch 1 , timing gets messed (you've got leave few minutes).

i have ugly example of issue @ codepen here: http://www.cdpn.io/wgqjj

again, you've got leave page open , untouched few minutes see problem. if had more items on page (5 or 10) problem becomes more apparent. i've used type of effect several jquery photo rotator plugins, , on time, issue crops up.

is there explanation this?

here code i'm using (i know javascript cleaner):

html:

<p id="one">first</p> <p id="two">second</p> <p id="three">third</p> 

javascript:

$(document).ready(function() {   var timer1 = settimeout(startone,1000);   var timer2 = settimeout(starttwo,2000);   var timer3 = settimeout(startthree,3000); });  function startone () {   setinterval(flashone,3000); }  function starttwo () {   setinterval(flashtwo,3000); }  function startthree () {   setinterval(flashthree,3000); }  function flashone () {   $("#one").fadeto("slow",0.4).fadeto("slow",1.0); }  function flashtwo () {   $("#two").fadeto("slow",0.4).fadeto("slow",1.0); }  function flashthree () {   $("#three").fadeto("slow",0.4).fadeto("slow",1.0); } 

question has been answered here. quoting top rated answer in topic:

it wait @ least 1000ms before executes, not wait 1000ms.

giving actual answer, i'd solve this:

$(function(){   settimeout(flashone,1000); });  function flashone () {   $("#one").fadeto("slow",0.4).fadeto("slow",1.0);   settimeout(flashtwo,1000); }  function flashtwo () {   $("#two").fadeto("slow",0.4).fadeto("slow",1.0);   settimeout(flashthree,1000); }  function flashthree () {   $("#three").fadeto("slow",0.4).fadeto("slow",1.0);   settimeout(flashone,1000); } 

like it's not possible timers mess up, it's delayed 1 second after item before has flashed.