Twitter Bootstrap Question posted in

Twitter bootstrap – jQuery fadeOut callback function – why would local function won't work while global function will?

I got a simple twitter bootstrap message frame that I’m write on, with some little jQuery effects.

First I fade out the board, and once it completed fading out, I’m writing what I want to and them fade it in again.

I got 2 versions:

the first, using a local defined function:

function postMessage(message, context) {
    if(typeof context === 'undefined')
        context = "info";

    var newClass = "alert alert-" + context;
    var messageBoard = $("#messageBoard");
    // Fade out
    messageBoard.fadeOut('slow', postFadeOut);

    var postFadeOut = function() {
        alert("XX");
//      $(this).attr('class', newClass);
//      $(this).html(message);
//      // Fade in again
//      $(this).fadeIn('slow');
    }
}

It won’t trigger the alert("XX"), yet:

function postMessage(message, context) {
    if(typeof context === 'undefined')
        context = "info";

    var newClass = "alert alert-" + context;
    var messageBoard = $("#messageBoard");
    // Fade out
    messageBoard.fadeOut('slow', postFadeOut);
}

function postFadeOut() {
    alert("XX");
//  $(this).attr('class', newClass);
//  $(this).html(message);
//  // Fade in again
//  $(this).fadeIn('slow');
}

Will trigger. Why?

Tags:

2

Answers


  1. 0

    Try declaring postFadeOut variable before call to messageBoard.fadeOut('slow', postFadeOut)

    function postMessage(message, context) {
    if(typeof context === 'undefined') {
        context = "info";
    };
    var newClass = "alert alert-" + context;
    var messageBoard = $("#messageBoard");
    var postFadeOut = function() {
        $(this).attr('class', newClass);
        $(this).html(message);
        // Fade in again
        $(this).fadeIn('slow');
    }
    // Fade out
    messageBoard.fadeOut('slow', postFadeOut);
}

postMessage("message")
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="messageBoard">message board</div>
    Login or Signup to reply.
  2. 0

    This is a variable hoisting effect.

    In JavaScript, variables are hoisted. That means that in the scope they are declared, they’re available in any line of code, even if declared after that line. However, their value, or initialization, happens in the order the code is written. For example:

    alert(a);
var a = 'Some value';
alert(a);

    As you can see, a is available in the first alert (no exception is thrown), but it’s uninitialized.

    The code above is for all purposes identical to:

    var a;
alert(a);
a = 'Some value';
alert(a);

    In your 1st example, the postFadeOut variable is hoisted like that, yet in the .fadeOut call it’s uninitialized and it’s value is undefined.

    The 2nd version works since functions are available within the scope they’re declared regardless of order of code. That’s due to the fact that the engine first parses the entire code, “remembering” the functions in that pass, and only then starts executing from the first line forward.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search