clearTimeout vs setInterval

Question

Ich habe eine WordPress-Website, für die ich einen Plugin-Slider für gemacht habe.

Ich möchte die setTimeout auf Hover pausieren und fortsetzen oder zurücksetzen bei Mouseout.

Mein Code ist ein wenig unordentlich geworden, da ich Sachen hinzugefügt habe, während ich gehe.

Ich denke, ich hätte die setInterval-Methode verwenden sollen, aber ich bin mir nicht sicher.

Die Seite ist auf **

und hier ist meine JS-Datei:

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

} 

Vielen Dank für jede Hilfe, Matt

Answer 1

Verwenden Sie das DRY Konzept und lassen JS berechnen die Anzahl der Folien für Sie.
Sie können auch sehr flüssig mit CSS3 animieren.
Alles, was Sie brauchen, ist eine Klasse der aktuellen Folie mit JS zuzuordnen.

$(".slider").each(function() { 
 

 
    var $cont = $(".cont", this), // Get DIV for content 
 
     $li = $("li", this), // Get 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 and 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> 
 

 
<!-- YOU CAN USE UNLIMITED .SLIDER --> 
 
<div class="slider"> 
 

 
    <div class="cont"></div> 
 

 
    <ul> 
 
    <li style="background-image:url(http://placehold.it/800x400/0bf);"> 
 
     <div>This is 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 is some 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> 
 
    <!-- AS MANY LI AS YOU WANT --> 
 
    </ul> 
 

 
</div>

Offtopic:
Ja, können Sie setInterval verwenden (als UI-Designer) Ich würde vorschlagen, dass Sie eine viel "schöner?" Weg, um das Zeug zu animieren, und das ist zu:
halten Sie die alte Folie und stattdessen schieben Sie die neue.
Das menschliche Auge ist mehr von bewegten Objekten angezogen. Eine neue Bewegungsfolie macht einen konzeptionellen und einführenden Sinn für ein neues Galerie-/Diashow-Thema.