Здраствуйте! как мне продолжить выполнение setInterval после нажатие кнопки старт? как мне запоминайте время старта, и какое условие должно быть

Question

<script>
    document.addEventListener('DOMContentLoaded', () => {
        let container = document.querySelector('#container');
        let timeout = setInterval(() => {
            const element = document.createElement('div');
            let random =  Math.floor(Math.random() * 20);
            element.className = 'element';
            element.innerText = `${random}`;
            container.append(element);
        }, 5000);

        const stop = document.querySelector('#stop');
        stop.addEventListener('click',event => {
            event.preventDefault();
            clearInterval(timeout);
        })
        const start = document.querySelector('#start');
        start.addEventListener('click', event => {
            event.preventDefault();
        })
    });
</script>

Answer 1

Самый примитивный вариант, всё раскидать по функциям:

let timeout = null;
let startTimerAndProcess = () => {
    timeout = setInterval(() => {
        const element = document.createElement('div');
        let random =  Math.floor(Math.random() * 20);
        element.className = 'element';
        element.innerText = `${random}`;
        container.append(element);
    }, 1000);
}
let stopTimerAndProcess = () => {
   clearInterval(timeout);  
}  

document.addEventListener('DOMContentLoaded', () => {
    let container = document.querySelector('#container');
    startTimerAndProcess();

    const stop = document.querySelector('#stop');
    stop.addEventListener('click',event => {
        event.preventDefault();
        stopTimerAndProcess();
    })
    const start = document.querySelector('#start');
    start.addEventListener('click', event => {
        event.preventDefault();
        startTimerAndProcess();
    })
});

div:not(#container) {
    border: 1px solid black;
    width: 20px;
    height: 20px;
}

<button id="start">start</button>
<button id="stop">stop</button>
<div id="container"></div>

Посложнее, но правильнее - сделать замыкания. Потому что торчащий наружу timeout некрасиво и может быть вообще перезаписан кем угодно когда угодно где угодно.

Можно чуть по-другому:

const process = {
    timeout: null,
    
    start() {
        timeout = setInterval(() => {
            const element = document.createElement('div');
            let random =  Math.floor(Math.random() * 20);
            element.className = 'element';
            element.innerText = `${random}`;
            container.append(element);
        }, 1000);
    },
    
    stop() {
        clearInterval(timeout);  
    }
};


document.addEventListener('DOMContentLoaded', () => {
    let container = document.querySelector('#container');
    process.start();

    const stop = document.querySelector('#stop');
    stop.addEventListener('click',event => {
        event.preventDefault();
        process.stop();
    })
    const start = document.querySelector('#start');
    start.addEventListener('click', event => {
        event.preventDefault();
        process.start();
    })
});

div:not(#container) {
    border: 1px solid black;
    width: 20px;
    height: 20px;
}

<button id="start">start</button>
<button id="stop">stop</button>
<div id="container"></div>

Лучше, но минусов тоже полно, например process знает про container, хотя не должен.

Answer 2

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

Можешь создать let переменную верхнего уровня и при старте присваивать ей таймер
Можешь создать отдельные функции
можешь создать отдельный класс с методами старт и стоп

БЛОГ НА HUSL

Здраствуйте! как мне продолжить выполнение setInterval после нажатие кнопки старт? как мне запоминайте время старта, и какое условие должно быть

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