all - ¿Cómo esperar 5 segundos con jQuery?

jquery selector by name

Question

Estoy intentando crear un efecto donde se carga la página, y después de 5 segundos, el mensaje de éxito en la pantalla se desvanece o se desplaza hacia arriba.

¿Cómo puedo conseguir esto?

Answer 1

Basándome en la respuesta de Joey, se me ocurrió una solución pensada (por jQuery, leí sobre ''cola'').

De alguna manera, sigue la sintaxis de jQuery.animate (): permite ser encadenado con otras funciones de fx, admite ''slow'' y otras jQuery.fx.speeds, además de ser totalmente jQuery. Y se manejará de la misma manera que las animaciones, si las detienes.

Aquí puede encontrar el campo de prueba jsFiddle con más usos (como mostrar .stop ()).

El núcleo de la solución es:

$(''<queue/>'')
.delay(100 /*ms*/)
.queue( (next) => { $(''#result'').text(''done.''); next(); } );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>

el conjunto como un complemento, que admite el uso de $ .wait () y $ (..). wait ():

// add wait as $.wait() standalone and $(elem).wait() for animation chaining
(function($) {
$.wait = function(duration, completeCallback, target) {
$target = $(target || ''<queue />'');
return $target.delay(duration).queue(function(next){completeCallback && completeCallback.call($target); next();});
}
$.fn.wait = function(duration, completeCallback) {
return $.wait.call(this, duration, completeCallback, this);
};
})(jQuery);
//TEST
$(function() {
// stand alone
$.wait(1000, function() {
$(''#result'')
.append(''...done'');
});
// chained
$(''#result'')
.append(''go...'')
.wait(''slow'', function() {
$(this).append(''after slow'');
})
.css({color: ''green''});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>

Nota: dado que la espera se agrega a la pila de animación, $ .css () se ejecuta inmediatamente, como se supone: el comportamiento esperado de jQuery.

Answer 2

Construido en javascript setTimeout .

setTimeout(
function()
{
//do something special
}, 5000);

ACTUALIZACIÓN : desea esperar desde que la página ha terminado de cargarse, así que ponga ese código dentro de su $(document).ready(...); guión.

ACTUALIZACIÓN 2 : jquery 1.4.0 introdujo el método .delay . Échale un vistazo Tenga en cuenta que .delay solo funciona con las colas de efectos de jQuery.

Answer 3

He estado usando este para una superposición de mensajes que puede cerrarse inmediatamente al hacer clic o se cierra automáticamente después de 10 segundos.

button = $(''.status-button a'', whatever);
if(button.hasClass(''close'')) {
button.delay(10000).queue(function() {
$(this).click().dequeue();
});
}

Answer 4

La biblioteca de guiones bajos también proporciona una función de "retraso":

_.delay(function(msg) { console.log(msg); }, 5000, ''Hello'');

Answer 5

Me encontré con esta pregunta y pensé que iba a proporcionar una actualización sobre este tema. jQuery (v1.5 +) incluye un modelo Deferred , que (a pesar de no adherirse a las Promises/A especificación hasta jQuery 3) generalmente se considera una forma más clara de abordar muchos problemas asíncronos. La implementación de un $.wait() usando este enfoque es particularmente legible, creo:

$.wait = function(ms) {
var defer = $.Deferred();
setTimeout(function() { defer.resolve(); }, ms);
return defer;
};

Y así es como puedes usarlo:

$.wait(5000).then(disco);

Sin embargo, si, después de una pausa, solo deseas realizar acciones en una sola selección de jQuery, entonces deberías usar el .delay() nativo de jQuery, que creo que también usa Deferred''s under the hood:

$(".my-element").delay(5000).fadeIn();

Answer 6

Utilice un temporizador javascript normal:

$(function(){
function show_popup(){
$("#message").slideUp();
};
window.setTimeout( show_popup, 5000 ); // 5 seconds
});

Esto esperará 5 segundos después de que el DOM esté listo. Si desea esperar hasta que la página esté realmente loaded , debe usar esto:

$(window).load(function(){
function show_popup(){
$("#message").slideUp();
};
window.setTimeout( show_popup, 5000 ); // 5 seconds
})

EDITAR: En respuesta al comentario del OP que pregunta si hay una manera de hacerlo en jQuery y no usar setTimeout la respuesta es no. Pero si quisieras hacerlo más "jQueryish", podrías envolverlo así:

$.wait = function( callback, seconds){
return window.setTimeout( callback, seconds * 1000 );
}

Entonces podrías llamarlo así:

$.wait( function(){ $("#message").slideUp() }, 5);

Answer 7

$( "#foo" ).slideUp( 300 ).delay( 5000 ).fadeIn( 400 );

Answer 8

setTimeout(function(){
},5000);

Coloque su código dentro de la { }

300 = 0.3 seconds
700 = 0.7 seconds
1000 = 1 second
2000= 2 seconds
2200 = 2.2 seconds
3500 = 3.5 seconds
10000 = 10 seconds

etc.