Помощь с setInterval и setTimeout. “Карусель”

254

23 января 2018, 13:43

При загрузке страницы, интервал стартует как надо. Я поставил кнопку для паузы интервала, но работает не так как надо.

При клике на кнопку происходит пауза, но только на определенный срок времени, а должна быть полная пауза пока не кликну на старт. В чем проблема?

При загрузке страницы, интервал должен сразу стартовать. Я написал это, но не знаю грамотно ли.

Прошу код не менять, если нет большой необходимости. Если код поменяли, пожалуйста прокомментируйте, и если не сложно, то объясните где не грамотный код.

Спасибо.

Использовать только на JS

(function() { 
  var elem, startInterval, removedElem, widthBlock, 
    btn1 = document.getElementById('click1'), 
    btn2 = document.getElementById('click2'), 
    collectionBlocks = document.getElementById('collection_divs'); 
 
 
  function clearThisInterval() { 
    if (thisElem.clientWidth == 0) { 
      removedElem = collectionBlocks.removeChild(collectionBlocks.children[0]); 
      collectionBlocks.appendChild(removedElem); 
      thisElem.style.width = '150px'; 
 
      clearInterval(startInterval); //удаляем интервал 
      // для следующего блока 
    } 
  } 
 
  function minWidth() { 
    thisElem = collectionBlocks.children[0]; 
    widthBlock = thisElem.clientWidth; 
    // Уменьшаем ширину 
    if (widthBlock != 0) { 
      startInterval = setInterval(function() { 
        thisElem.style.width = [widthBlock -= 2] + 'px'; 
      }, 30); 
    } 
    setTimeout(clearThisInterval, 2253); // 15 строка //удаляем интервал 
  } 
 
  // Запускаем интервал / строка 19 
  btn2.onclick = function() { 
    setInterval(minWidth, 3000); 
  } 
 
  //становить или пауза  интервала для уменьшение ширины  / 23 строка // 	 
  btn1.onclick = function() { 
    clearInterval(startInterval); 
  } 
 
  //при загрузке стартует сам 
  //setInterval(minWidth, 5000); 
})();

.div { 
  width: 150px; 
  height: 30px; 
  background-color: red; 
  float: left; 
  margin-right: 2px; 
  margin-bottom: 10px; 
  margin-top: 10px; 
} 
 
button { 
  width: 100px; 
  height: 40px; 
}

<button id="click1">stop</button> 
<button id="click2">start</button> 
 
<div id="collection_divs"> 
  <div class="div">1</div> 
  <div class="div">2</div> 
  <div class="div">3</div> 
  <div class="div">3</div> 
</div>

Answer 1

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

  function minWidth() {
    thisElem = collectionBlocks.children[0];
    widthBlock = thisElem.clientWidth;
    // Уменьшаем ширину
    if (widthBlock != 0) {
      clearInterval(startInterval); // !!!
      startInterval = setInterval(function() {
        thisElem.style.width = [widthBlock -= 2] + 'px';
      }, 30);
    }
    setTimeout(clearThisInterval, 2253); // 15 строка //удаляем интервал
  }
  var minWidthInterval;
  // Запускаем интервал / строка 19
  btn2.onclick = function() {
    clearInterval(minWidthInterval); // !!!
    minWidthInterval = setInterval(minWidth, 3000);
  }
  //становить или пауза  интервала для уменьшение ширины  / 23 строка //    
  btn1.onclick = function() {
    clearInterval(minWidthInterval); // !!!
    clearInterval(startInterval);
  }