javascript - setTimout() in callback not working, why? - Stack Overflow

I'd like to know why setimout(fun(),time) is not working here:

Context: This shows a message and Hides it, i'd like to make it wait 2 seconds, but if i do as following it wont hide (normally i do it without the setimeout()

function mostrar_msj(msj){
  $('#notificaciones').text(msj);
  $('#notificaciones').animate({
          top:$(window).scrollTop()+"px"
      },
      {
          queue: false,
          duration: 350
  });  
  $("#notificaciones").slideDown(1000, setTimeout('cerrar()',2000));
}

function cerrar(){
  $("#notificaciones").fadeOut(2000);
}

I'm just confused, here :?

I'd like to know why setimout(fun(),time) is not working here:

Context: This shows a message and Hides it, i'd like to make it wait 2 seconds, but if i do as following it wont hide (normally i do it without the setimeout()

function mostrar_msj(msj){
  $('#notificaciones').text(msj);
  $('#notificaciones').animate({
          top:$(window).scrollTop()+"px"
      },
      {
          queue: false,
          duration: 350
  });  
  $("#notificaciones").slideDown(1000, setTimeout('cerrar()',2000));
}

function cerrar(){
  $("#notificaciones").fadeOut(2000);
}

I'm just confused, here :?

• javascript
• jquery
• settimeout

Share Improve this question Follow edited Mar 23, 2011 at 21:28 tvanfosson 533k102102 gold badges700700 silver badges799799 bronze badges asked Mar 23, 2011 at 21:21 Toni Michel CaubetToni Michel Caubet 20.2k5858 gold badges217217 silver badges388388 bronze badges 2

• This isn't an answer to your question, but you are probably better off using jQuery's delay in this case. – Fareesh Vijayarangam Commented Mar 23, 2011 at 21:28
• What are you trying to achieve? If you want the #notificaciones to fadeOut after they plete the slideDown, just use an anonymous function as the callback for slideDown. – Matijs Commented Mar 23, 2011 at 21:28

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 8

As you are using jQuery, easier is to use delay():

$("#notificaciones").slideDown(1000).delay(2000).fadeOut(2000);

Animation functions are automatically queued.

---

But to answer your actual question:

1. You are not setting the callback correctly. This

   $("#notificaciones").slideDown(1000, setTimeout('cerrar()',2000));
   

   will set the return value of setTimeout as callback for slideDown. A proper callback would be

   $("#notificaciones").slideDown(1000, function() {
       setTimeout('cerrar()',2000);
   });
   

   But this does not explain why the cerrar is not called as obviously setTimout is called. This brings us to the second point:

2. If you pass a string to setTimeout, then it is evaluated in global scope. If you have this piece of code inside the ready handler, then cerrar is not in global scope and thus not found by JavaScript.

   For this reason, passing strings is discouraged. You should pass a function reference instead:

   setTimeout(cerrar, 2000);
   

It doesn't work because you didn't understand how to use callbacks. Here's the proper code:

function mostrar_msj(msj) {
    $('#notificaciones').text(msj);

    $('#notificaciones').animate({
        top: $(window).scrollTop() + "px"
    }, {
        queue: false,
        duration: 350
    });
    $("#notificaciones").slideDown(1000, function() {
        setTimeout(function() {
            $("#notificaciones").fadeOut(2000);
        }, 2000)
    });
}

Try this:

$("#notificaciones").slideDown(1000, function() { setTimeout('cerrar()',2000) });

You're referencing a function call when you should just reference the function:

...setTimeout(cerrar,2000)

Try passing cerrar as function pointer:

setTimeout(cerrar, 2000)

see: JQuery, setTimeout not working

I highly remend not using setTimeout() if you are already using jQuery. Here is another way you could acplish the same goal in a cleaner more jQuery-like fashion:

function mostrar_msj(msj){
        $('#notificaciones').text(msj);
        $('#notificaciones').animate({top:$(window).scrollTop()+"px" },{queue: false, duration: 350});  
        $("#notificaciones").slideDown(1000).delay(2000).fadeOut(2000);
}

The delay function takes the number of MS for the timeout as its argument, and will continue executing the queued/chained jQuery operations after the timeout.

You should be able to do it this way, using the delay method

function mostrar_msj(msj){
    $('#notificaciones')
        .text(msj)
        .animate({top:$(window).scrollTop()+"px" },{queue: false, duration: 350})  
        .slideDown(1000)
        .delay(2000)
        .fadeOut(2000);
}