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

При загрузке страницы, интервал стартует как надо. Я поставил кнопку для паузы интервала, но работает не так как надо.
При клике на кнопку происходит пауза, но только на определенный срок времени, а должна быть полная пауза пока не кликну на старт. В чем проблема?
При загрузке страницы, интервал должен сразу стартовать. Я написал это, но не знаю грамотно ли.
Прошу код не менять, если нет большой необходимости. Если код поменяли, пожалуйста прокомментируйте, и если не сложно, то объясните где не грамотный код.
Спасибо.
Использовать только на 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; }

1

2

3

3

Ответ

Если какой-то код, который запускает таймер, вызывается больше одного раза, он должен запоминать значение, возвращаемое 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); }