Javascript-форум - Обратный отсчет от заданного числа с задержкой

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Обратный отсчет от заданного числа с задержкой (https://javascript.ru/forum/misc/71326-obratnyjj-otschet-ot-zadannogo-chisla-s-zaderzhkojj.html)

Обратный отсчет от заданного числа с задержкой

Здравствуйте, необходимо, чтобы при прокрутке человеком к нужной части сайта, кол-во товаров уменьшалось, причем сначала на 2, затем через 3 секунды еще на 3, я использовал такой код

$(function() {
    var jqBar = $('#bar-1');
    var jqBarStatus = true;
    $(window).scroll(function() {
        var scrollEvent = ($(window).scrollTop() > (jqBar.position().top - $(window).height()));
        if (scrollEvent && jqBarStatus) { 
            jqBarStatus = false;
      var currentNumber = $('#dynamic-number').text();

$({numberValue: currentNumber}).animate({numberValue: 60}, {
    duration: 8000,
    easing: 'linear',
    step: function() { 
        $('#dynamic-number').text(Math.ceil(this.numberValue)); 
    }
});
           
        }}
    });
})

как сделать, чтобы после того как отсчет дойдет до 60, через 3 секунды продолжился до 57 например?

frost68,

$({numberValue: currentNumber}).animate({numberValue: 60}, {
    duration: 8000,
    easing: 'linear',
    step: function() {
        $('#dynamic-number').text(Math.ceil(this.numberValue));
    }
}).delay(3000).animate({numberValue: 57}, {
    duration: 8000,
    easing: 'linear',
    step: function() {
        $('#dynamic-number').text(Math.ceil(this.numberValue));
    }
});

Цитата:

Сообщение от рони (Сообщение 469771)

frost68,

$({numberValue: currentNumber}).animate({numberValue: 60}, {
    duration: 8000,
    easing: 'linear',
    step: function() {
        $('#dynamic-number').text(Math.ceil(this.numberValue));
    }
}).delay(3000).animate({numberValue: 57}, {
    duration: 8000,
    easing: 'linear',
    step: function() {
        $('#dynamic-number').text(Math.ceil(this.numberValue));
    }
});

Огромное спасибо, работает!:)

Цитата:

Сообщение от рони (Сообщение 469771)

frost68,

$({numberValue: currentNumber}).animate({numberValue: 60}, {
    duration: 8000,
    easing: 'linear',
    step: function() {
        $('#dynamic-number').text(Math.ceil(this.numberValue));
    }
}).delay(3000).animate({numberValue: 57}, {
    duration: 8000,
    easing: 'linear',
    step: function() {
        $('#dynamic-number').text(Math.ceil(this.numberValue));
    }
});

Как сделать выполнения этого скрипта еще раз, в другом месте, я сделал так

$(function () {
    var jqBar = $('#bar-2'); // селектор для вашего блока
    var jqBarStatus = true;
    $(window).scroll(function() {
        var scrollEvent = ($(window).scrollTop() > (jqBar.position().top - $(window).height()));
        if (scrollEvent && jqBarStatus) { 
            jqBarStatus = false;
            /* выполнение скрипта jqbar с определенными параметрами */
      var currentNumber = $('#dynamic-number2').text();

$({numberValue: currentNumber}).animate({numberValue: 60}, {
    duration: 100,
    easing: 'linear',
    step: function() { 
        $('#dynamic-number2').text(Math.ceil(this.numberValue)); 
    }
});
           
        }
    });
});

но там с цифры 63 моментально становиться цифра 61 и ничего не происходит

Цитата:

Сообщение от frost68

моментально

Цитата:

Сообщение от frost68

duration: 100,

???

затупил, поправил, но второй скрипт начинает срабатывать сразу после загрузки страницы, а не при пролистывании к этому элементу

Цитата:

Сообщение от рони (Сообщение 469824)

???

Мой код тоже вроде заработал, а как сделать, чтобы при обновлении страницы одним и тем же человеком показывались уже конечный цифры без обратного отсчета? Т.е. чтобы отсчет каждый раз не сбрасывался

Цитата:

Сообщение от frost68

Т.е. чтобы отсчет каждый раз не сбрасывался

читать про localStorage, смотреть примеры с localStorage

В чем здесь ошибка? Суть в том, что если человек увидел обратный отсчет, то при перезагрузке страницы он видел только результат выполнения обратного отсчета, а если local storage пуст, то выполнялся обратный отсчет.
<div class="attention">По акции доступно <span id="dynamic-number3">63</span>!</div>

<script>
document.getElementById('dynamic-number3').onload = function() {
  if(document.getElementById('dynamic-number3')=== null) {
    localStorage.setItem('dynamic-number3', "57");
  } else {
    localStorage.setItem('dynamic-number3', "63");
  }
}
if (localStorage.getItem('dynamic-number3') == "63") {
   
            jqBarStatus = false;
            /* выполнение скрипта jqbar с определенными параметрами */
      var currentNumber = $('#dynamic-number3').text();

$({numberValue: currentNumber}).animate({numberValue: 60}, {
    duration: 5000,
    easing: 'linear',
    step: function() { 
        $('#dynamic-number2').text(Math.ceil(this.numberValue)); 
    }

})
</script>