Я не могу найти причину, по которой функция window.setInterval () не работает в моем коде. Onclick делает один цикл. В чем моя логическая ошибка?

Функция startGallery делает всего один цикл при нажатии на кнопку. Это проблема.

function startGallery() {
  window.intervalId = window.setInterval(imgChange(), 2000);
}

function stopGallery() {
  window.clearInterval(window.intervalId);
}

function imgChange() {
  let picture1 = document.getElementById('picture1');
  let picture2 = document.getElementById('picture2');
  let picture3 = document.getElementById('picture3');
  let picture4 = document.getElementById('picture4');
  let picture5 = document.getElementById('picture5');

  console.log('picture1 - ' + picture1.src);
  console.log('picture2 - ' + picture2.src);
  console.log('picture3 - ' + picture3.src);
  console.log('picture4 - ' + picture4.src);
  console.log('picture5 - ' + picture5.src);

  let src1 = "file:///C:/js/JavaScript/img/1.jpg";
  let src2 = "file:///C:/js/JavaScript/img/2.jpg";
  let src3 = "file:///C:/js/JavaScript/img/3.jpg";
  let src4 = "file:///C:/js/JavaScript/img/4.jpg";
  let src5 = "file:///C:/js/JavaScript/img/5.jpg";

  (picture1.src == src1) ? picture1.src = src2: (picture1.src == src2) ? picture1.src = src3 : (picture1.src == src3) ? picture1.src = src4 : (picture1.src == src4) ? picture1.src = src5 : picture1.src = src1;
  (picture2.src == src2) ? picture2.src = src3: (picture2.src == src3) ? picture2.src = src4 : (picture2.src == src4) ? picture2.src = src5 : (picture2.src == src5) ? picture2.src = src1 : picture2.src = src2;
  (picture3.src == src3) ? picture3.src = src4: (picture3.src == src4) ? picture3.src = src5 : (picture3.src == src5) ? picture3.src = src1 : (picture3.src == src1) ? picture3.src = src2 : picture3.src = src3;
  (picture4.src == src4) ? picture4.src = src5: (picture4.src == src5) ? picture4.src = src1 : (picture4.src == src1) ? picture4.src = src2 : (picture4.src == src2) ? picture4.src = src3 : picture4.src = src4;
  (picture5.src == src5) ? picture5.src = src1: (picture5.src == src1) ? picture5.src = src2 : (picture5.src == src2) ? picture5.src = src3 : (picture5.src == src3) ? picture5.src = src4 : picture5.src = src5;
}
body {
  background-color: black;
  text-decoration-color: white;
  color: white;
}

input {
  width: 20vw;
  padding: 10px 2px 10px 2px;
}

label {
  font-family: "Lucida Console", "Courier New", monospace;
  font-size: 30px;
}

p {
  font-family: "Lucida Console", "Courier New", monospace;
  font-size: 30px;
}

.my-class {
  color: red;
}

img {
  height: 40vh;
  width: 30vw;
}
<form>
  <fieldset>
    <legend>task_21_7</legend>
    <img id="picture1" src="img/1.jpg">
    <img id="picture2" src="img/2.jpg">
    <img id="picture3" src="img/3.jpg">
    <img id="picture4" src="img/4.jpg">
    <img id="picture5" src="img/5.jpg"><br><br>
    <input type="button" name="start" value="start" onclick="startGallery();"><br><br>
    <input type="button" name="stop" value="stop" onclick="stopGallery();"><br><br>

  </fieldset>
</form>


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

Автор решения: gil9red

Тут вы в setInterval первым параметром передали результат выполнения функции, а не ссылку на функцию:

window.intervalId = window.setInterval(imgChange(), 2000);

Попробуйте так:

window.intervalId = window.setInterval(imgChange, 2000);

Или так (добавил лямбду):

window.intervalId = window.setInterval(() => { imgChange() }, 2000);
→ Ссылка