use ajax request json output in settimeout function

Question

I have a var in jquery after a request like

         type: 'POST',
     data: data,
     cache: false,
     success: function (data) {
         var json = jQuery.parseJSON(data);

I'm trying to use timeout to fire the function below after five seconds.

        $("#a" + json.id).fadeOut(300);

At the moment I'm doing

          setTimeout('$("#a" + json.id).fadeOut(300)', 500);

but it doesn't seem to work

When you pass a `String` to `setTimeout()` or `setInterval()`, it'll be `eval`uated in the global scope, where `json` isn't available. — Jonathan Lonowski, Jan 19 '14 at 03:52

score 3 · Accepted Answer · answered Jan 19 '14 at 03:47

3

setTimeout takes a function and a number as a parameter, try this:

setTimeout(function() {
    $("#a" + json.id).fadeOut(300);
}, 500);

answered Jan 19 '14 at 03:47

Andrew De Forest

6,829
14
39
50

Firebug says typeError: ("#a" + json.id).fadeOut is not a function – Kwaasi Djin Jan 19 '14 at 03:51
See my edit, I forgot to put a `$` in front of `("#a" + json.id).fadeOut(300)` – Andrew De Forest Jan 19 '14 at 03:52

score 0 · Answer 2 · answered Jan 19 '14 at 05:35

Not sure if the value of json.id changes by the time the timeout callback is called.

Consider the following example:

for (var i=0;i<10;i++){
  setTimeout(function(){console.log(i)},500);
}

The callback function sees i=10 because that's the value of i by the time the function is invoked. You can do a pre-binding by using closure:

var f=function(id){
  setTimeout(function(){console.log(id);},500);
}

for (var i=0;i<10;i++) f(i);

Now that you see how closure and pre-binding work, here's a more robust solution to your question:

var f=function(id){
  setTimeout(function(){$('#a'+id).fadeOut(300);},500);
}

f(json.id);

score 0 · Answer 3 · answered Jan 19 '14 at 05:42

Your code doesn't work because the String is eval'ed in global context. So for it to work you can make json global (remove the var).

Also, while I am not sure where you are calling the setTimeout from, but assuming it is inside the callback, you can alternatively make the id a part of the string :


setTimeout('$("#a'+json.id+'").fadeOut(300)', 500);

But certainly a better option is to avoid eval and globals at all costs (checkout Eval is evil and Why global state is the devil for an elaborate explaination) and pass in a closure :


setTimeout(function(){ $("#a" + json.id).fadeOut(300); }, 500);

use ajax request json output in settimeout function

3 Answers3

Linked