setTimout() in callback not working, why?

Question

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 :?

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

Felix Kling · Accepted Answer · 2011-03-23T21:39:36.197

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:

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

score 2 · Answer 2 · answered Mar 23 '11 at 21:27

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

score 1 · Answer 3 · answered Mar 23 '11 at 21:28

1

Try this:

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

answered Mar 23 '11 at 21:28

Richard Dalton

35,513
6
73
91

score 0 · Answer 4 · answered Mar 23 '11 at 21:26

0

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

...setTimeout(cerrar,2000)

answered Mar 23 '11 at 21:26

RSG

7,013
6
36
51

@Thief, no it's not. However, it is discouraged for the same reasons as eval. – Matthew Flaschen Mar 23 '11 at 21:29
`.slideDown(1000, setTimeout('cerrar()',2000));` the return value of setTimeout is an integer (the timeout id), not a valid callback... – ThiefMaster Mar 23 '11 at 23:14

score 0 · Answer 5 · edited May 23 '17 at 12:26

0

Try passing cerrar as function pointer:

setTimeout(cerrar, 2000)

see: JQuery, setTimeout not working

edited May 23 '17 at 12:26

Community

1
1

answered Mar 23 '11 at 21:27

manji

47,442
5
96
103

score 0 · Answer 6 · answered Mar 23 '11 at 21:29

I highly recommend not using setTimeout() if you are already using jQuery. Here is another way you could accomplish 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.

score 0 · Answer 7 · answered Mar 23 '11 at 21:30

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

setTimout() in callback not working, why?

7 Answers7