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-seentime set zero
  • after scroll first time
    • if post in viewport
      • if i'm scrilling => value of data-seentime increases
      • else => nothing happends
    • else doing nothing

but i'm expecting is

  • the post marked visited.
  • data-seentime set zero
  • after scroll first time
    • if post in viewport => value of data-seentime increases
    • else doing nothing

what problem; why increment happens if i'm scrolling in page?


Comments

Popular posts from this blog

Sort a complex associative array in PHP -

vb.net - How to ignore if a cell is empty nothing -

recursion - Can every recursive algorithm be improved with dynamic programming? -