javascript - clearTimeout vs setInterval -

i have wordpress site made plugin slider for.

i want pause settimeout on hover , resume or reset on mouseout.

my code has gotten little messy have been adding things go.

i think should've used setinterval method, i'm not sure.

the site @ **

and here .js file:

$(document).ready(function(){ addactive(); })  function addactive(){   $time = constants.transition; $delay = constants.delay+'000'; $control = constants.control; var $change = $($control);  console.log($time); console.log($delay); console.log($control);  var $slider = $('.slider-plus'); var $value1 = $slider.find('li:nth-child(1) .sas-values').html();    $('.slider-plus li:nth-child(1)').addclass('active').css({'z-index':'1','opacity':'1'}); $change.html($value1); settimeout(translate1, $delay);   function translate1(){     var $change = $($control);     var $value2 = $slider.find('li:nth-child(2) .sas-values').html();     $slider.find('li:nth-child(3)').removeclass('translate');     $slider.find('li:nth-child(1)').removeclass('active').addclass('translate').animate({'z-index':'0','opacity':'0'},$time);     $slider.find('li:nth-child(2)').addclass('active').animate({'z-index':'1','opacity':'1'},$time);     $change.html($value2);     if ($slider.find('li:nth-child(2)').hasclass('active')) {            $slider.hover(function(){             cleartimeout($(this).data('timeout'));         }, function(){             settimeout(translate2, $delay);         });     } }  function translate2(){     var $change = $($control);     var $value3 = $slider.find('li:nth-child(3) .sas-values').html();     $slider.find('li:nth-child(1)').removeclass('translate');     $slider.find('li:nth-child(2)').removeclass('active').addclass('translate').animate({'z-index':'0','opacity':'0'},$time);     $slider.find('li:nth-child(3)').addclass('active').animate({'z-index':'1','opacity':'1'},$time);     $change.html($value3);     settimeout(translate3, $delay); }  function translate3(){     var $change = $($control);     var $value3 = $slider.find('li:nth-child(3) .sas-values').html();     $slider.find('li:nth-child(2)').removeclass('translate');     $slider.find('li:nth-child(3)').removeclass('active').addclass('translate').animate({'z-index':'0','opacity':'0'},$time);     $slider.find('li:nth-child(1)').addclass('active').animate({'z-index':'1','opacity':'1'},$time);     $change.html($value1);     settimeout(translate1, $delay); }  } 

thanks help, matt

use dry concept , let js calculate number of slides you.
also, can animate fluidly using css3.
need assign class current slide using js.
yes, can use setinterval:

$(".slider").each(function() {      var $cont = $(".cont", this), // div content        $li   = $("li", this),    // slides        tot   = $li.length,       // how many slides?        itv   = null,             // setinterval variable        c     = 0                 // dummy incremental counter        function anim() {      var $lic = $li.removeclass("show").eq(c).addclass("show");      $cont.html($lic.find(".to-cont").html());      c = ++c % tot; // increment , loop counter    }      function stop() {      clearinterval( itv );    }      function play() {      itv = setinterval(anim, 3000);    }      $(this).hover(stop, play);    // pause on hover        anim();                       // animate first slide in!    play();                       // start loop!    });

*{margin:0;box-sizing:border-box;}    .slider{    position:relative;    height:50vh;  }  .slider .cont{    position:relative;    background:#eee;    width:33.333%;  height:100%;     padding:24px 16px;  }  .slider ul{    position:absolute;    overflow:hidden;    right:0;  top:0;    width:66.666%;  height:100%;    padding:0;  list-style:none;  }  .slider ul li{    position:absolute;    width:100%;  height:100%;    background:50%;  background-size:cover;        transition: transform 1s, opacity 1s;    opacity:0;    transform:translatex(-100%);  }  .slider ul li.show{    transition: transform 0s, opacity 1s;    opacity:1;    transform:translatex(   0%);  }  .slider ul li div{    position:absolute;    right:0;  bottom:0;    padding:16px;    background:rgba(255,255,255,0.5)  }  .slider ul li .to-cont{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <!-- can use unlimited .slider -->  <div class="slider">      <div class="cont"></div>      <ul>      <li style="background-image:url(http://placehold.it/800x400/0bf);">        <div>this slide 1</div>        <div class="to-cont"><h2>slide 1</h2> 1orem ipsum...</div>      </li>      <li style="background-image:url(http://placehold.it/800x400/fb0);">        <div>this slide 2</div>        <div class="to-cont"><h2>slide 2</h2> 2orem ipsum...</div>      </li>      <li style="background-image:url(http://placehold.it/800x400/bf0);">        <div>slide 3</div>        <div class="to-cont"><h2>slide 3</h2> 3orem ipsum...</div>      </li>      <!-- many li want -->    </ul>    </div>

offtopic: (as ui designer) i'd suggest "nicer?" way animate stuff, , that's to:
keep old slide , instead slidein new one.
human eye more attracted moving objects. new moving slide makes more conceptual , introductory sense new gallery/slideshow topic.