SetTimeout not delaying a function call

Question

Can somebody please tell me why the setTimeout used in the code below isn't working? It just runs the function straightaway.

function change_txt_font(elem, id, text_fnt){
    current_width = parseInt($('#span_text'+id).css('width')); 
    current_height = parseInt($('#span_text'+id).css('height')); 
    current_font_size = parseInt($("#span_text"+id).css("font-size"));

    parent.document.getElementById(elem+'_f').value=text_fnt;

    $('#span_text'+id).css('font-family',text_fnt);
    $('#'+elem).css('font-family',text_fnt); 
    setTimeout(adjust_for_font(id),2000);
    }

function adjust_for_font(id){
        alert("function")
        alert("id = "+id)
    new_height = parseInt($('#span_text'+id).css('height'));
    new_width = parseInt($('#span_text'+id).css('width'));
    width_ratio = parseFloat(current_width/new_width)
    height_ratio = parseFloat(current_height/new_height)
    new_font_size = current_font_size * Math.min(width_ratio,height_ratio)
    $("#text"+id).css("font-size", (parseFloat(new_font_size) - 1) + "px");
    $("#span_text"+id).css("font-size", (parseFloat(new_font_size) - 1) + "px");
    document.getElementById("form_front_text"+id).submit();
}document.getElementById("form_front_text"+id).submit();
}

Any help appreciated.

Answer 1

The problem is this line

setTimeout(adjust_for_font(id),2000);

This doesn't schedule the invoking of adjust_for_font(id) but instead invokes the function directly and schedules the return value. To schedule the invocation of the function wrap the call in a lambda

setTimeout(function() { adjust_for_font(id); },2000);

Answer 2

By not putting quotes around your function, the function will process immediately, setTimeout will run (but won't process a function) and you're left wondering what on earth happened.

setTimeout is designed to run like this:

setTimeout('adjust_for_font',2000);

Or a using an anonymous function in the callback is another option:

setTimeout(function(){adjust_for_font(id);}, 2000);

Answer 3

Change

setTimeout(adjust_for_font(id),2000);

to

setTimeout("adjust_for_font(id)",2000);

Answer 4

This should do the trick:

setTimeout(adjust_for_font, 2000, id);

I am passing the function name, to be executed when 2000 milliseconds have passed. In your code, you are passing the result of adjust_for_font. The brackets after the function name cause it to be executed as soon as it is parsed (immediately).

Answer 5

The way you have it written, it's as if the output of adjust_for_font(id) is the input to the first parameter of setTimeout. The first parameter should be the function, not the result of the function. Try this instead...

setTimeout(function() {
    adjust_for_font(id);
},2000);

Answer 6

The SetTimeout syntax is setTimeout(function,milliseconds,param1,param2,...)

Here "function" means not the calling of the function. It should be the real function.

So you have to change your code to

setTimeout(adjust_for_font,2000,id); (note: The parameter id should pass after the milliseconds parameter)

or alternatively you can set the first parameter as bellow

setTimeout(function() { adjust_for_font(id); },2000);

Answer 7

This is from my experiences. Just specifying setTimeout() will cause it to execute upon page load itself, even if it's parent function is not called. making it into a variable like this works..

before

function xyz(){
  //do something if needed
  setTimeout(function abc, duration);
  //setTimeout will be executed even before xyz() call
}

after

function xyz(){
  //do something if needed
  var t=setTimeout(function abc, duration);
  //this time, setTimeout will be executed upon xyz() call and not upon pageload
}