Pregunta sobre jquery, javascript – ¿Cómo borrar el intervalo y configurarlo de nuevo?

13

Esto es lo que estoy tratando de lograr: cuando se alcanza la última diapositiva fadeOut last slide y luego fadeIn first slide, y luego clearInterval(todo funciona con esta parte). Ahora mi problema es que quiero establecer Intervalootra vez si no existe pero no sé cómo hacerlo realidad :(
He intentado resolver esto con declaración, pero luego mi script no funciona en absoluto.
Entonces, ¿cómo puedo REINICIAR mi intervalo de nuevo? ¡¡GRACIAS!!
Sin Si una declaración como esta está funcionando bien:

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

});
@Blazemonger señor, usted estaba editando mi publicación y al mismo tiempo yo también. Así que perdí tu preciosa edición. Si crees que puedes editar mi respuesta, será un placer para mí. thecodeparadox
No puedes reiniciarlo; se borra, se elimina Lo que puedes hacer es comenzar un NUEVO intervalo con la misma función. - Blazemonger

Tu respuesta

4   la respuesta
17

Después de borrar un intervalo debes comenzar de nuevo consetInterval().

Sería mejor hacer función para susetInterval()

var intervalID = null;

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

aquíflag es unboolean variable con valortrue/ false. true ejecutarásetInterval() yfalse seráclearInterval();

Ahora puedes usar la función anterior como necesites.

Por ejemplo:

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

intervalManager(false);  // for clearInterval
@DejoDekic de nada. thecodeparadox
¡Sé cómo borrarlo pero no sé cómo reiniciarlo! Dejo Dekic
THX thecodeparadox para su tiempo y su respuesta! ¡Lo aprecio! Dejo Dekic
No puede reiniciar un intervalo que ya se ha borrado. Pero, ¿por qué no simplemente empiezas uno nuevo? YMMD
0

Solo ejemplo

var myVar 
function myTimer() {
    var d = new Date();
    var t = d.toLocaleTimeString();
    document.getElementById("demo").innerHTML = t;
}

function myStopFunction() {
    clearInterval(myVar);
}
function myStartFunction() {
    myVar = setInterval(myTimer, 1000);
}
myStartFunction();
<p id="demo"></p>
<button onclick="myStopFunction()">Stop time</button>
<button onclick="myStartFunction()">Start time</button>

0

EnvolversetInterval 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 llámalo donde quieras:

startTimer()

3

Aquí está el objeto de utilidad que toma una devolución de llamada y un intervalo que puede usar 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
        }

    };  

*Lo usarías 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>

Preguntas relacionadas