How to delay the execution of setInterval?

Question

JavaScript

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 + "%";
    
  }

Please tell me how, when you click on the circleone button, stop and restart the interval function. Well, that is, so that when I clicked on circleone, the interval would immediately restart, that is, it would work after 4 seconds

Answer 1

if I understood correctly, then you need a reboot type for the interval.
maybe like this

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();
  }