ejemplos - jquery timer loop

jQuery delay()-¿Cómo detenerlo?

Question

Ya probé stop (true, true), stop (true) y clearQueue (); pero esto no funciona.

Tengo problemas con el cambio rápido de diapositivas, ya tengo alguna función que tiene que restablecer todo, pero no funciona.

function reset(){
   $(''div'').clearQueue();
   $(''#img'').html('''').css({''left'':0,''right'':0,''opacity'':1,''z-index'':1});
   $(''#img2'').html('''').css({''left'':0,''right'':0,''opacity'':1,''z-index'':1});
   $(''#place'').html('''');$(''#place'').html(''<div id="img"></div><div id="img2"></div>'');
}

Pero creo que esto no detiene (o elimina) la función de retardo () en las animaciones. Así que no sé si no tengo que usar la función setTimeout.

Aquí hay un pedazo de guión de animación:

reset();
actual_slide=2;
  $(''#img'').html(''<img src="''+image[4]+''" alt="Obrázek">'').css({''opacity'':0,''z-index'':2}).delay(time_delay/5).fadeTo(time_fast,1).delay(time_delay*2).fadeTo(time_fast,0);
  $(''#img2'').html(''<img src="''+image[3]+''" alt="Obrázek">'').css({''opacity'':''0'',''top'':0}).fadeTo(time_fast,1).animate({''top'':''-495''},time_delay*3,function(){
    if(actual_slide==2){$(''#img2'').css({''top'':0}).fadeTo(time_fast*2,0).html('''');}else{reset();}
    if(actual_slide==2){$(''#img'').html(''<img src="''+image[3]+''" id="1" alt="Obrázek">'').fadeTo(time_fast*2,''1'').css({''left'':-300,''top'':-700}).animate({''left'':-900,''top'':-700},time_delay*2);}else{reset();}
    if(actual_slide==2){$(''#1'').css({''width'':1365,''height'':1200}).animate({''width'':1665,''height'':1400},time_delay*2);}else{reset();}
  });                          

Ese real_slide tiene que protegerlo antes de repetir esa función, pero eso no funciona también ... El problema es cuando cambio rápidamente las diapositivas, porque el reinicio no detiene todo, y comienza a hacer cosas que no quiero tener. en (como cambiar la imagen a otra y otra).

Answer 1

A través de este post hay un enfoque muy simple, que es usar .animate en lugar de .delay

Answer 2

Desde la página de jQuery delay :

El método .delay () es el mejor para retrasar entre los efectos jQuery en cola. Debido a que es limitado, por ejemplo, no ofrece una forma de cancelar la demora, .delay () no reemplaza la función nativa setTimeout de JavaScript, que puede ser más apropiada para ciertos casos de uso.

Echa un vistazo al complemento doTimeout ; Puede ser lo que buscas.

¡Espero que esto ayude!

Answer 3

Puedes romper .delay () con la función .dequeue ()

aqui es ejemplo

//this is only for make sure that we skip ''delay'', not other function
var inDelay = false;

function start()
{
    $(''.gfx'').animate
    ({
        width: 100
    }, function(){inDelay = true}).delay(3000).animate
    ({
        width: 0
    }, function(){inDelay = false})
}

function breakTheDelay()
{
    if(inDelay)
    {
        $(''.gfx'').dequeue();
    }
}

http://jsfiddle.net/wasikuss/5288z/

// editar: ejemplo más complejo provisto con marcas de tiempo de registro y limpieza (sin limpieza, los clics múltiples en Start son impredecibles) para probar que funciona

http://jsfiddle.net/q0058whc/

o por debajo

//this is only for make sure that we skip ''delay'', not other function
var inDelay = false;
var ltime = 0;

// console log will aways show ''end'' values: 2000, 1000 an 400
// values may be different due to time wasted on calling functions
// sometimes delay is shorten by 0-200ms, it can be caused by js engine probably  

function start()
{
    cleanup();
    ltime = (1*new Date());
    $(''.gfx'').queue(''fx'', function(next)
    {
      logtime( ''animate1_start'' );
     $(''.gfx'').animate
      ({
          width: 100
      }, 2000, function(){logtime(''animate1_end'');inDelay = true;})
      next();
    })
    .queue(''fx'', function(next)
    {
     logtime(''delay_start'');
     next()
    })
    .delay(1000)
    .queue(''fx'', function(next)
    {
     logtime(''delay_end'');
     next()
    })
    .queue(''fx'', function(next)
    {
     logtime(''animate0_start'');
     $(''.gfx'').animate
      ({
          width: 0
      }, function(){logtime(''animate0_end'');inDelay = false;})
      next()
    });
}

function cleanup()
{
  // remove current queue
    $(''.gfx'').clearQueue()
    // first animate runned interval. stop it 
    .stop()
    // reset width of element
    .css(''width'',0)
}

function logtime( name )
{
 var ntime = (1*new Date());
 console.log( name + '': '' + ( ntime - ltime ) );
  ltime = ntime;
}

function breakTheDelay()
{
    if(inDelay)
    {
        $(''.gfx'').dequeue();
    }
}

//
// version without ''inDelay'' check only if you know what are you doing
// http://jsfiddle.net/wasikuss/hkw9H/
//

.gfx
{
    background: red;
    width: 0;
    height: 10px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button onclick="start()">Start</button>
<button onclick="breakTheDelay()">Can''t wait!</button>
<div class="gfx"></div>

Answer 4

Quería que un usuario reiniciara rápidamente una cadena de animación una y otra vez, a veces en medio de la animación. Así que en lugar de usar delay() , animé a una propiedad css falsa {"null":1} . Aquí hay un simple fade-in / fade-out. ¡Parece haber trabajado para mí!

//- fade in
$el.stop().animate({"opacity":1}, 200, "easeInSine", function(){
    //- delay for 2000ms
    $el.stop().animate({"null":1}, 2000, function(){
        //- fade out
        $el.stop().animate({"opacity":0}, 1000, "easeInOutSine", function(){
            //- final callback
        });
    });
});