Как задержать выполнение setInterval?

Question

[sinevik]

var slider = document.querySelectorAll("article");
	var circleone = document.getElementById("circle-one");
	var circletwo = document.getElementById("circle-two");
	var interval = setInterval(function() {
  			for(var i = 0; i < slider.length; i++){
        	var item = parseInt(slider[i].style.left);
        	if(item === 0){
          	item = 100;
          	slider[i].style.transitionDuration = "0s";
          	slider[i].style.left = item + "%";
        	}else{
          	item-=100;
          	slider[i].style.transitionDuration = "0.5s";
          	slider[i].style.left = item + "%";
        	}       
    	}
	}, 4000);
	circleone.onclick = function(){
		slider[0].style.left = 0 + "%";
		slider[1].style.left = 100 + "%";
		
	}

Подскажите пожалуйста, как при нажатии на кнопку circleone, остановить и перезапустить функцию interval. Ну то есть что бы когда я нажал на circleone, interval бы сразу же перезапустился, то есть сработал через 4 секунды

Answer 1

[Микола Деревло]

если я правильно понял, то вам нужен типа reboot для интервала.
можно вот так

var slider = document.querySelectorAll("article");
  var circleone = document.getElementById("circle-one");
  var circletwo = document.getElementById("circle-two");
var interval;
function Run(){
 clearInterval(interval);
 interval = setInterval(function() {
  			for(var i = 0; i < slider.length; i++){
        	var item = parseInt(slider[i].style.left);
        	if(item === 0){
          	item = 100;
          	slider[i].style.transitionDuration = "0s";
          	slider[i].style.left = item + "%";
        	}else{
          	item-=100;
          	slider[i].style.transitionDuration = "0.5s";
          	slider[i].style.left = item + "%";
        	}       
    	}
  }, 4000);
}
Run(); 
  circleone.onclick = function(){
    slider[0].style.left = 0 + "%";
    slider[1].style.left = 100 + "%";
    
   Run();
  }