¿Cómo borrar el intervalo y configurarlo de nuevo?

Esto es lo que estoy tratando de lograr: cuando se llega a la última diapositiva, desaparece la última diapositiva y luego desvanece en la primera diapositiva, y luego borra Interval (todo funciona con esta parte). Ahora mi problema es que quiero configurarInterval nuevamente si no existe pero no sé cómo hacerlo :(
He intentado resolver esto con if statment pero luego mi script no funciona en ! todo
Entonces, ¿cómo puedo reiniciar mi intervalo de nuevo GRACIAS !!
Sin sentencia if como esta que está funcionando muy bien:?¿Cómo borrar el intervalo y configurarlo de nuevo?

if(!intervalID){ 
    intervalID = setInterval(animate,5000); 
}

esto es lo que tengo hasta ahora:

$(document).ready(function() { 
    /*check if intervalID don't exists messes UP!!*/ 
    if (!intervalID) { 
    intervalID = setInterval(animate, 5000); 
    } 

    //Hide everything except first slide and controls 

    $('.slidewrap div:not(.slidewrap div:first,.slidewrap .slide_controls)').hide(); 

    var animate = function() { 

    /*if .pagination_active is last removeClass and addClass to .pagination_active 
      first li tag*/ 

    if ($('.pagination_active').is($('.slide_controls ul li:last'))) { 
     $('.pagination_active').removeClass('pagination_active'); 
     $('.slide_controls ul li:first').addClass('pagination_active'); 
    } else { 
     $('.pagination_active').removeClass('pagination_active').next().addClass('pagination_active'); 
    } 

    /*if div.active is last fadeOut and add .active class 
      to the first div and fadeIn FIRST div then CLEAR INTERVAL and set intervalID to zero */ 

    if ($('.active').is($('.slidewrap div:last'))) { 
     $('.active').fadeOut(1000).removeClass('active'); 
     $('.slidewrap div:first').addClass('active').fadeIn(1000, function() { 
     clearInterval(intervalID); 
     intervalID = 0; 

     }); 
    } 

    //OR .active fadeOut and next div fadeIn 
    else { 
     $('.active').fadeOut(1000).next().fadeIn(1000, function() { 
     $('.slidewrap div.active').removeClass('active').next('div').addClass('active'); 

     }); 
    } 

    } 

    var intervalID; 
    intervalID = setInterval(animate, 3000); 

});

Fuente

2012-06-07 Dejo Dekic

No puede reiniciarlo; está borrado, eliminado Lo que puede hacer es comenzar un NUEVO intervalo con la misma función. - – Blazemonger

@Blazemonger señor, usted estaba editando mi publicación y también a mí mismo. Así que perdí tu preciosa edición. Si lo considera necesario, puede editar mi respuesta, será un placer para mí – thecodeparadox

Después de borrar un intervalo, debe volver a iniciarlo con setInterval().

Sería mejor hacer la función para su setInterval()

var intervalID = null; 

function intervalManager(flag, animate, time) { 
    if(flag) 
    intervalID = setInterval(animate, time); 
    else 
    clearInterval(intervalID); 
}

Aquí flag es una variable con un valor booleantrue/ false. true ejecutará setInterval() y falseclearInterval();

Ahora puede usar la función anterior según lo necesite.

Por ejemplo:

intervalManager(true, animate, 300); // for setInterval 

intervalManager(false); // for clearInterval

Fuente

2012-06-07 15:35:33 thecodeparadox

¡Sé cómo borrarlo pero no sé cómo REINICIARLO! –

No puede reiniciar un intervalo que ya se ha borrado. ¿Pero por qué no simplemente comienzas uno nuevo? – YMMD

THX thecodeparadox para su tiempo y su respuesta! ¡Lo aprecio! –

Aquí es objeto utilidad que tiene una devolución de llamada y el intervalo que se puede utilizar para iniciar y detener un intervalo.

//simple utility object to start and stop an interval  
    var IntervalUtil = function(functionCall, interval){ 


     var intervalObj = 0, 
      INTERVAL = interval; 

     var callback = functionCall; 

     function startTimer(){ 
      console.log('start timer', intervalObj) 
      if(intervalObj === 0){ 
       intervalObj = setInterval(callback, INTERVAL) 
      } 
     } 

     function stopTimer(){ 
      clearInterval(intervalObj); 
      intervalObj = 0; 
      console.log('timer stopped', intervalObj); 
     } 

     return { 
      startTimer : startTimer, 
      stopTimer : stopTimer 
     } 

    };

* Se podría utilizarlo como tal *

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <meta name="author" content=""/> 

    <title>Timer : setInterval()</title> 


    <style type="text/css"> 


    html, body, div, span, applet, object, iframe, 
    h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
    a, abbr, acronym, address, big, cite, code, 
    del, dfn, em, img, ins, kbd, q, s, samp, 
    small, strike, strong, sub, sup, tt, var, 
    b, u, i, center, 
    dl, dt, dd, ol, ul, li, 
    fieldset, form, label, legend, 
    table, caption, tbody, tfoot, thead, tr, th, td, 
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary, 
    time, mark, audio, video { 
     margin: 0; 
     padding: 0; 
     border: 0; 
     font-size: 100%; 
     color:#000; 
     line-height:1.3em; 
     font: inherit; 
     vertical-align: middle; 
     font-family:arial; 
     font-size:12px; 
     outline:none; 
    } 

    a{ 
     outline:none; 
     text-decoration:none; 
     color:#145486; 
    } 
    a span{ 
     color:#145486; 
    } 

    h1{ 
     font-weight:normal; 
     font-size:32px; 
    } 

    body{ 
     background:#efefef; 
     text-align:center; 
    } 
    .content{ 
     width:400px; 
     padding:20px; 
     margin:10px auto; 
     background:#fff; 
     border:solid 1px #ebebeb; 
     text-align:left; 
    } 

    #toggleTimer{ 
     color:#fff; 
     font-size:10px; 
     padding:2px 7px; 
     display:inline-block; 
     background:#357cb7; 
     border:solid 1px #0c8af4; 
    } 

    #toggleTimer.running{ 
     background:#f14621; 
     border:solid 1px #ff4c00; 
    } 

    #output{ 
     padding:7px; 
     font-size:10px; 
     border:dashed 1px #ebebeb; 
     background:#f8f8f8; 
     margin-left:10px; 
     display:inline-block; 
    } 
    em{ 
     font-weight:bold; 
    } 

    </style> 

</head> 
<body> 


<div class="content"> 

    <h1>Set Interval Code</h1> 

    <a href="javascript:" id="toggleTimer" class="">Start Timer</a> 

    <span id="output"></span> 

    <br class="clear"/> 

</div> 


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 


<script type="text/javascript"> 

    $(document).ready(function(){ 
     var demo = new Demo(); 
    }); 


    var Demo = function(){ 

     var self = this; 

     var START_TEXT = "Start Timer", 
      STOP_TEXT = "Stop Timer"; 

     var $toggle = $('#toggleTimer'), 
      $output = $('#output'); 

     var count = 0; 

     var intervalUtil; 

     function init(){ 
      intervalUtil = new IntervalUtil(printMessage, 1000); 
      setClickHandler(); 
      return self; 
     } 

     function setClickHandler(){ 
      $toggle.click(toggleTimer) 
     } 

     function toggleTimer(){ 

      $toggle.toggleClass('running'); 

      if($toggle.hasClass('running')){ 
       $toggle.text(STOP_TEXT); 
       intervalUtil.startTimer(); 
      }else{ 
       $toggle.text(START_TEXT); 
       intervalUtil.stopTimer(); 
      } 
     } 

     function printMessage(){   
      $output.html("printMessage called <em>" + (count++) + "</em> times"); 
     } 

     return init(); 

    } 


    //simple utility object to start and stop an interval  
    var IntervalUtil = function(functionCall, interval){ 


     var intervalObj = 0, 
      INTERVAL = interval; 

     var callback = functionCall; 

     function startTimer(){ 
      console.log('start timer', intervalObj) 
      if(intervalObj === 0){ 
       intervalObj = setInterval(callback, INTERVAL) 
      } 
     } 

     function stopTimer(){ 
      clearInterval(intervalObj); 
      intervalObj = 0; 
      console.log('timer stopped', intervalObj); 
     } 

     return { 
      startTimer : startTimer, 
      stopTimer : stopTimer 
     } 

    }; 

</script> 


</body> 
</html>

Fuente

2012-06-07 16:30:35 mcroteau

Wrap setInterval en una función, por ejemplo:

const startTimer = (timer) => { 
    let seconds = 10 
    timer = setInterval(() => { 
     console.log(seconds) 
     seconds-- 
     if(seconds === 0) { 
      console.log("Time's up") 
      clearInterval(timer) 
     } 
    }, 1000) 
}

y llamar siempre que lo desee:

startTimer()

Fuente

2017-12-14 11:13:34

¿Cómo borrar el intervalo y configurarlo de nuevo?

Respuesta

Cuestiones relacionadas