Скорость выполнения js скрипта

161

29 декабря 2019, 18:30

Есть скрипт "ход конем".

В нем интервал между ходом коня (400). Скрипт начинает свое выполнение с клика по кнопке "Старт".

Хочу создать 2 кнопки "button" +50 и -50 (к скорости выполнения скрипта, до запуска, клика по "Старт"), только опыта не хватает. Как стандартное значение 400 , пользователю можно изменить с 400 с ходом в +-50 от 50 до 600 ?

function horse() {
  //..... code
  let interval = setInterval(() => {
    nextStep();
  },400);
}

Прошу помощи.

Answer 1

// начальное значение задержки
let delay = 400; 
// функция цикла через установку таймаута на каждой итерации 
function loop() {
  nextStep(); 
  setTimeout(loop, delay);
}
// функция увеличения/уменьшения задержки 
const incDelay = x => delay = Math.min(600, Math.max(50, delay + x)); 
// обработчики клика по кнопкам уменьшения и увеличения скорости
btnSlower.addEventListener('click', () => incDelay(50)); 
btnFaster.addEventListener('click', () => incDelay(-50));

При таком подходе, необходимо учитывать время выполнения синхронного кода - фактически, это время неявно "добавляется" к указанному значению задержки.
То есть, интервал цикла будет примерно равен сумме delay и времени выполнения nextStep().

Answer 2

Изменить интервал работы setInterval нельзя.

Соответственно, надо остановить старый setInterval и запустить новый setInterval с новым значением.

function horse(time) { 
  //..... code 
  // Очищаем предыдущий setInterval 
  if (horse.interval) { 
    clearInterval(horse.interval); 
  } 
  horse.interval = setInterval(() => { 
    nextStep(); 
  }, time); 
} 
 
function nextStep() { 
  console.log('step', intervalTime); 
} 
 
let intervalTime = 400; 
 
function changeInterval(value) { 
  intervalTime += value; 
  horse(intervalTime); 
} 
 
horse(intervalTime);

<button onclick="changeInterval(50)">+50</button> 
<button onclick="changeInterval(-50)">-50</button>

Answer 3

function horse() {
  //..... code
  let bubulalala = Number(document.getElementById('moo').innerText);
  let interval = setInterval(() => {
    nextStep();
  },bubulalala);
}

Тут идея в том, чтобы сделать отдельно div id="moo", где и для пользователя отображается скорость хода (400), а в уголках маленькие кнопки + и - // Как-то удачно организовать через CSS. А сам интервал сделать в зависимости того, что написано внутри этого div

(хотя не рекомендуется хранить данные в HTML, т.к. пользователь может на странице их вручную изменить. Это иногда может быть опасно)

<div id="moo">500</div>
<div id="minus">-</div>
<div id="plus">+</div>

А вот при клике на минус, например:

document.getElementById('minus').addEventListener('click',function(){
  let moo = document.getElementById('moo');
  if( Number(moo.innerText) > 50 ) {//Если число меньше 50, не сработает.
    moo.innerText = Number(moo.innerText) - 50;
  }
});

Для Плюсика то же самое, в другом направлении (if < 600)