Блог

Главная - Вопросы по программированию - как создать бесконечный цикл в javascript

как создать бесконечный цикл в javascript

#javascript #loops

#javascript #циклы

Вопрос:

Я только начинаю работать с javascript, я хотел бы иметь кнопку переключения, которая запускает функцию, пока она не будет нажата снова. У меня есть некоторый код для переключения:

 const backgroundButton = document.getElementById("backgroundButton"); //getting button from HTML
let clickToggle = 0; //defining a veriable used to store the state of the button


backgroundButton.addEventListener("click", function(){   
    if (clickToggle == 0) {

        console.log('button was off');

        //start loop

        clickToggle = 1;
    }
    else {

        console.log('button was on');
        
        //stop loop
        
        clickToggle = 0;
    }
});

но я не знаю, как выполнить бесконечный цикл, любая помощь приветствуется!

(PS: Я знаю, что бесконечные циклы выходят из строя, вот почему я здесь)

Комментарии:

1. Есть хороший ресурс: developer.mozilla.org/en-US/docs/Web/JavaScript/Guide /…

2. Вам не нужен бесконечный цикл JS, поскольку он блокирует все остальные выполнения на странице, включая обнаружение нажатий на кнопки.

3. Есть несколько вариантов. while(true) , for (i=0; i>=0; i ) setTimeout/setInterval …

4. Что вы хотите сделать во время этого цикла?

5. В этом случае использование setInterval / setTimeout в значительной степени обязательно, чтобы не блокировать цикл событий, который предотвратил бы вызов stop функции.

Ответ №1:

Вы могли бы использовать setInterval и clearInterval . Действительно бесконечный цикл будет выглядеть следующим образом:

 while (true) doSomething();

Но это не то, чего кто-либо хочет, поскольку это заблокирует пользовательский интерфейс. Используя setTimeout или setInterval , вы позволяете циклу событий продолжать выполнять свою работу.

Я предполагаю, что вы хотите повторить вызов функции doSomething в этой демонстрации:

 const backgroundButton = document.getElementById("backgroundButton"); 
let timer = 0;
const output = document.getElementById("output");

backgroundButton.addEventListener("click", function(){   
    if (timer == 0) {
        console.log('button was off');
        //start loop
        timer = setInterval(doSomething, 50);        
    }
    else {
        console.log('button was on');
        //stop loop
        clearInterval(timer);
        timer = 0;
    }
});

function doSomething() {
    output.textContent =  output.textContent   1;
}  
 <button id="backgroundButton">Start/Stop</button>
<div id="output"></div>

Ответ №2:

Вы можете сделать что-то вроде этого. Надеюсь, следуя разрешению, вы являетесь необходимым сценарием.

 let isEnabled = false;
let interval;

function clickFunction() {

    isEnabled = !isEnabled; // toggle enable flag

    if (isEnabled) {
        console.log('Set Interval', isEnabled)
        interval = setInterval(function () {
            console.log('Do some work.');
        }, 1000);
    } else {
        console.log('Clear Interval', isEnabled)
        clearInterval(interval);
    }
}


<button onclick="clickFunction()">Click me</button>

Ответ №3:

Вы также можете использовать Window.requestAnimationFrame() для бесконечного цикла.

 const toggleButton = document.querySelector('#toggle');

let hasBegun = false;
let anim;

const tick = () => {
    if (hasBegun) {
        document.querySelector('#output').textContent  = ' ';
    };
    requestAnimationFrame(tick)
};

toggleButton.addEventListener("click", function() {
    if (!hasBegun) {
        console.log('Starting');
        hasBegun = true;
        anim = requestAnimationFrame(tick);
    } else {
        console.log('Stopping');
        hasBegun = false;
        cancelAnimationFrame(anim);
        anim = null;
    }
});  
 <button id="toggle">Start/Stop</button>
<pre id="output"></pre>