Блог

Мне трудно справиться с этой проблемой. Итак, я получил счетчик, который я хочу медленно считать от 0 до 3 после того, как пользователь прокрутил страницу вниз и достиг определенного класса, в моем случае «.domov2»

Если я удалю API (EventListener), счетчик отлично работает, но он уже начинает отсчет сразу после загрузки сайта.

Мне удалось это сделать, но вместо того, чтобы выполняться 1 раз при прокрутке вниз, функция выполняется как действительно много раз для прокрутки после достижения div (я действительно плохо разбираюсь в API). Как мне ограничить выполнение функции 1 раз и поддерживать ее выполнение только с условием.

HTML:

 <section class="domov2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</section>

<div id="counter" data-target="3">
-1
</div>

  

JavaScript

 $(window).bind('scroll', function() {
    if($(window).scrollTop() >= $('.domov2').offset().top   $('.domov2').outerHeight() - window.innerHeight) {
        // create function startCount()
const startCount = function() {
    // get number value from data-target and current number
    const target =  counter.getAttribute('data-target');
    const count =  counter.innerText;

    // if count<target 
    if (count < target) {
        // add to current value  1
        var sestevek = count   1
        // replace current value in html with recently updated value "sestevek"
        counter.innerText = sestevek;
        // slow down condition for 0.3s
        setTimeout(startCount, 300);
    } else {
        //if current value is = target, then keep target
        counter.innerText = target;
    }};
    
    //execute function
    startCount();
    }
});
  

Крис Г. Большое вам спасибо, мне это удалось, счетчик теперь работает идеально, спасибо за вашу помощь!

Обновленный JavaScript:

 let countStarted = false;

function somefunction(){
if (countStarted == false){
// create function startCount()
const startCount = function() {
  // get number value from data-target and current number
  const target =  counter.getAttribute('data-target');
  const count =  counter.innerText;
  countStarted = true;
  // if count<target 
  if (count < target) {
      // add to current value  1
      var sestevek = count   1
      // replace current value in html with recently updated value "sestevek"
      counter.innerText = sestevek;
      // slow down condition for 0.3s
      setTimeout(startCount, 300);
  } else {
      //if current value is = target, then keep target
      counter.innerText = target;
  }};

  //execute function
  startCount();
}}
//execute somefuntion() when div class comes into view area
$(window).bind('scroll', function() {
  if($(window).scrollTop() >= $('.domov2').offset().top   $('.domov2').outerHeight() - window.innerHeight) {
      somefunction()
  }});