Остановка таймера js

Question

как сделать так чтобы когда число дошло до 2021 остановился

let x = document.querySelector(".input")
let y = document.querySelector(".square-second")
let z = document.querySelector(".timer")
window.onscroll = function(){
    x.value = pageYOffset
    if(pageYOffset > 800){
        y.style.backgroundColor = 'green'
        let interval = setInterval(function(){
            z.value++
        },100)
    }
    else if(pageYOffset <900){
        y.style.backgroundColor = 'red'
        z.value=0
    }
}

input{
    position: fixed;
}
.container{
    width: 100%;
    display: flex;
    justify-content: center;
}
.square{
    margin: 20px;
    width: 300px;
    height:300px;
    background-color: red;
}
.square-second{
    margin: 20px;
    width: 300px;
    height:700px;
    background-color: red;
    transition: 0.5s;
    width: 980px;
    position: relative;
    display: flex;
    justify-content: center;
}
.timer{
    font-size: 50px;
    position: absolute;
    background: none;
    width: 200px;
    text-align: center;
    margin-top: 100px;
    outline: none;
    border:none;
}

<input type="" class="input">
            <div class="container">
                <div class = "square"></div>
                <div class = "square"></div>
                <div class = "square"></div>
            </div>
            <div class="container">
                <div class = "square"></div>
                <div class = "square"></div>
                <div class = "square"></div>
            </div>
            <div class="container">
                <div class = "square"></div>
                <div class = "square"></div>
                <div class = "square"></div>
            </div>
            <div class="container">
                <div class = "square"></div>
                <div class = "square"></div>
                <div class = "square"></div>
            </div>
            <div class="container">
            <div class="square-second">
                <input type="text" value = '0' class = "timer">
            </div>
            </div>

Answer 1

let x = document.querySelector(".input")
let y = document.querySelector(".square-second")
let z = document.querySelector(".timer")
var per = 1;
window.onscroll = function(){
    x.value = pageYOffset
    if(pageYOffset > 800){
        y.style.backgroundColor = 'green'
        if(per){ 
        var interval = setInterval(work,10)

        per = 0;
        }
        function work(){
            z.value = Number(z.value) + 1;
            if(Number(z.value) == 2021){clearInterval(interval);}
        }
    }
    else if(pageYOffset <900){
        y.style.backgroundColor = 'red'
        z.value=0
    }
}

input{
    position: fixed;
}
.container{
    width: 100%;
    display: flex;
    justify-content: center;
}
.square{
    margin: 20px;
    width: 300px;
    height:300px;
    background-color: red;
}
.square-second{
    margin: 20px;
    width: 300px;
    height:700px;
    background-color: red;
    transition: 0.5s;
    width: 980px;
    position: relative;
    display: flex;
    justify-content: center;
}
.timer{
    font-size: 50px;
    position: absolute;
    background: none;
    width: 200px;
    text-align: center;
    margin-top: 100px;
    outline: none;
    border:none;
}

<input type="" class="input">
            <div class="container">
                <div class = "square"></div>
                <div class = "square"></div>
                <div class = "square"></div>
            </div>
            <div class="container">
                <div class = "square"></div>
                <div class = "square"></div>
                <div class = "square"></div>
            </div>
            <div class="container">
                <div class = "square"></div>
                <div class = "square"></div>
                <div class = "square"></div>
            </div>
            <div class="container">
                <div class = "square"></div>
                <div class = "square"></div>
                <div class = "square"></div>
            </div>
            <div class="container">
            <div class="square-second">
                <input type="text" value = '0' class = "timer">
            </div>
            </div>

Если я вас правильно понял то это будет решением.

Answer 2

Использовать функцию clearInterval

let interval;

document.getElementById('start').addEventListener('click', function() {
  if (!interval) {
    interval = setInterval(function() {
      const val = ++document.getElementById('val').value;
      if (val == 2021) {
        clearInterval(interval);
        interval = undefined;
      }
    }, 100);
  }
});

document.getElementById('stop').addEventListener('click', function() {
  if (interval) {
    clearInterval(interval);
    interval = undefined;
  }
});

<input id="val" value="2000" /><br/>
<input id="start" type="button" value="Start" />
<input id="stop" type="button" value="Stop" />

Answer 3

Вы создаете в условии if(pageYOffset > 800) много счетчиков. Это можно заметить в том как быстро у вас добавляются числа. Как вариант использовать флаг для определения надо ли создавать новый счетчик. И при достижении нужного вам условия этот счетчик удалить через clearInterval.

let x = document.querySelector(".input")
let y = document.querySelector(".square-second")
let z = document.querySelector(".timer")
let isNeedCreatetedCounter = true;
let interval;
window.onscroll = function(){
    x.value = pageYOffset
    if(pageYOffset > 800 && isNeedCreatetedCounter) {
      isNeedCreatetedCounter = false;
        y.style.backgroundColor = 'green'
        interval = setInterval(function(){
            z.value++
        if (z.value === "50") {
             clearTimeout(interval);
           }
        },100);

    } 
  else if(pageYOffset <900){
        y.style.backgroundColor = 'red'
        z.value=0
        clearTimeout(interval);
        isNeedCreatetedCounter = true;
    }

}

input{
    position: fixed;
}
.container{
    width: 100%;
    display: flex;
    justify-content: center;
}
.square{
    margin: 20px;
    width: 300px;
    height:300px;
    background-color: red;
}
.square-second{
    margin: 20px;
    width: 300px;
    height:700px;
    background-color: red;
    transition: 0.5s;
    width: 980px;
    position: relative;
    display: flex;
    justify-content: center;
}
.timer{
    font-size: 50px;
    position: absolute;
    background: none;
    width: 200px;
    text-align: center;
    margin-top: 100px;
    outline: none;
    border:none;
}

<input type="" class="input">
            <div class="container">
                <div class = "square"></div>
                <div class = "square"></div>
                <div class = "square"></div>
            </div>
            <div class="container">
                <div class = "square"></div>
                <div class = "square"></div>
                <div class = "square"></div>
            </div>
            <div class="container">
                <div class = "square"></div>
                <div class = "square"></div>
                <div class = "square"></div>
            </div>
            <div class="container">
                <div class = "square"></div>
                <div class = "square"></div>
                <div class = "square"></div>
            </div>
            <div class="container">
            <div class="square-second">
                <input type="text" value = '0' class = "timer">
            </div>
            </div>

Я сделал условие до 50, чтоб не ждать до 2021.

БЛОГ НА HUSL

Остановка таймера js

Ответы (3 шт):