javascript - setTimeout works only when the callback function is called -
i'm trying calculate time of appearance of specific dom element on viewport; when element appears set it's time initial value of zero. , each time element visible users(inside viewport of screen) make settimeout increases it's time 1 every second. , when element disappeared remove callback.
//thanks https://stackoverflow.com/a/33979503/4614264 function isdominviewport(element, fn) { $(window).scroll(function () { var top_of_element = $(element).offset().top; var bottom_of_element = $(element).offset().top + $(element).outerheight(); var bottom_of_screen = $(window).scrolltop() + $(window).height(); var top_of_screen = $(window).scrolltop(); if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)) { fn(1); } else { fn(0); } }); } var poststimerarray=[];//array hold `settimeout` each post id $("div.container").bind('domsubtreemodified', function () { var posts = $("div.post").each(function(i, obj) { if(!$(obj).attr("data-visited")){//if didn't visit post before bind actions it. //analyzepost(obj); $(obj).attr("data-visited", "1");//set post visited $(obj).attr("data-seentime", "0");//set initial time 0 var id=$(obj).attr("id"); isdominviewport(obj, function (istrue) { if(istrue) {//if element in viewport start timer if(!poststimerarray[id]){ poststimerarray[id]=settimeout(function(){ $(obj).attr("data-seentime", (parseint($(obj).attr("data-seentime"))+1) + "" ); }, 1000); } console.log($(obj).attr("data-seentime")); } else {//if element has disappeared viewport stop timer if(poststimerarray[id]){ cleartimeout(poststimerarray[id]); poststimerarray[id]=undefined; console.log("removed"); } } console.log(poststimerarray); }); } }); }); what i'm expecting data-seentime increase every second when post visible in viewport, code increases it's value when post in viewport , i'm scrolling page; ie. if there's no scrolling ,the data-seentime value won't increase.
to give more explanation problem, happens
- the post marked visited.
data-seentimeset zero- after scroll first time
- if post in viewport
- if i'm scrilling => value of
data-seentimeincreases - else => nothing happends
- if i'm scrilling => value of
- else doing nothing
- if post in viewport
but i'm expecting is
- the post marked visited.
data-seentimeset zero- after scroll first time
- if post in viewport => value of
data-seentimeincreases - else doing nothing
- if post in viewport => value of
what problem; why increment happens if i'm scrolling in page?
Comments
Post a Comment