Включение и выключение функцыи JS?

Question

[xzekov]

нужно сделать включение и выключение функцыи на одну кнопку

<span id="move-me-3" style="position: absolute; border: 1px dashed black;">Подвижный Текст<br>
</span>

<script>
var rho = 150;
var phi = -5;
var phiOffset = Math. PI / 180 * 1.5;
var xOffset = 900; 
var yOffset = 350; 
var toggle = true;




function moveByCircle(){
                

document.getElementById('move-me-3').style.right = rho * Math.cos(phi) + xOffset + 'px'; 
document.getElementById('move-me-3').style.top = rho * Math.sin(phi) + yOffset + 'px';
phi += phiOffset;
}
setInterval(moveByCircle, 0);

function ByCircle(){
clearInterval(moveByCircle , stop);
}

</script>
<input type="button" value="ЗДЕСЬ" onClick="ByCircle()"  >

Answer 1

[Сергей Соколов]

Лучше вместо setInterval() использовать requestAnimationFrame()
Там принцип: отрисовали кадр – запросили отрисовку следующего. Пошаговая передача эстафеты.

Завести переменную-флаг, которая будет true или false. Разрешать или запрещать анимацию.

На каждом шаге смотреть на эту переменную: и делать следующий requestAnimationFrame() только если переменная true.

Кнопка будет менять состояние этой переменной. И, при переключении из false в true, запускать отрисовку.

Ещё оптимизация: не нужно в каждом кадре искать элементы, достаточно это сделать один раз.

Answer 2

[Сергей delphinpro]

При условии, что у вас в принципе правильно работает функция moveByCycle, делаем следующее:

Пишем две функции

let t; // Дескриптор счетчика setInterval

function startCycle() {
 t = setInterval(moveByCircle, 0);
}

function stopCycle() {
  clearInterval(t);
}

Функцию ByCycle выкидываем нахер, ибо непонятно, что она делает.

Кнопку переписываем

<button onclick="toggleCycle">ВКЛ/ВЫКЛ<button>

И пишем последнюю функцию

function toggleCycle() {
  if (t) {
    stopCycle();
  } else {
    startCycle();
  }
}

Comments

[xzekov]

а как сделать чтоб оно потом ищё продолжило работать по второму нажатию

[Сергей delphinpro]

xzekov,

function stopCycle() {
  clearInterval(t);
  t = undefined;
}

[Сергей delphinpro]

xzekov, как заметили в соседнем ответе, выборку элемента можно вынести и выполнять один раз

const element = document.getElementById('move-me-3');

function moveByCircle(){
    element.style.right = rho * Math.cos(phi) + xOffset + 'px'; 
    element.style.top = rho * Math.sin(phi) + yOffset + 'px';
    phi += phiOffset;
}

[wisgest]

<button onclick="toggleCycle">

Сергей delphinpro, разве так (без скобок после имени функции) можно?

[Сергей delphinpro]

wisgest, а так работает?