lundi 29 novembre 2021

Stopping a Javascript timer function from running multiple times after using an 'in viewport' function to call it?

Creating a website with a timer that counts up once the div is scrolled into view. The problem I'm having is that scrolling away starts the timer again, and I'd like the final value that the timer reaches to remain until the page is reloaded.

I've tried using 'event.handled' and '$.Callbacks("once")' but neither seem to work.

Any guidance would be appreciated - code below!

$(allInView);
$(window).scroll(allInView);

function isScrolledIntoView(elem) {
  var docViewTop = $(window).scrollTop();
  var docViewBottom = docViewTop + $(window).height();

  var elemTop = $(elem).offset().top;
  var elemBottom = elemTop + $(elem).height();

  return elemBottom <= docViewBottom && elemTop >= docViewTop;
}

function allInView() {
  if (isScrolledIntoView($("#column4"))) {
    /// when 'column4' IS being 'viewed', the timers then begin

    jQuery(function ($) {
      $(".timer").countTo({
        from: 0,
        to: 183,
        speed: 1000,
        refreshInterval: 50,
        onComplete: function (value) {
          console.debug(this);
        },
      });
    });
  }
}

Aucun commentaire:

Enregistrer un commentaire