Javascript：函数声明类型对setInterval和onComplete重要吗？

Question

My question is basically an extension to this one: var functionName = function() {} vs function functionName() {} . I've read through all the answers, but I think I'm still missing the answer to this question:

Why does the type of function declaration matter for jQuery's onComplete event and the native setInterval method? Moreover, why does it matter for these, but not for the normal addEventListener?

Example with onComplete events (assuming blinkOn() is called):

//like this the onComplete event works normally and the functions call eachother
function blinkOn() { $blink.fadeIn( 500, blinkOff ); }
function blinkOff() { $blink.fadeOut( 500, blinkOn ); }

//like this blinkOff won't be called after the fadeIn
function blinkOn() { $blink.fadeIn( 500, blinkOff ); }
var blinkOff = function() { $blink.fadeOut( 500, blinkOn ); };

Example with setInterval:

//works fine
var timer = setInterval( onTimer, 700);
function onTimer() { ... }

//won't work
var timer = setInterval( onTimer, 700);
var onTimer = function() { ... }

The reason I'd like to know is because I want consistency in my code. If the only way to get that is just using function a() { ... } , that's okay. But I think var a = function() { ... } is more clear in defining scope. And I'm just really curious.

Answer 1

If you were to define your function above where your calls to the function are, you'd have no issues.

var toggleLight = function () { light = !light; };

setInterval(toggleLight, 500);

Your problem is that you're trying to access things which don't exist yet.

It's the exact same thing as trying to do this:

var c = a + b,

    a = 12,
    b = 3;

When the program hits c , a and b don't exist.

Think of this as happening in three steps, for every single function:

var a = 12,
    b = 3,
    c = add(a, b);

function add (a, b) { return a + b; }

STEP 1.
The engine grabs the named function add and works out what it does (defines all named-functions first).

STEP 2.
The engine locates all variables in the function and sets them to undefined :

var a = undefined,
    b = undefined,
    c = undefined;

function add(a, b) { return a + b; }

STEP 3.
The engine initializes all variables in order.

// 3.1
var a = 12,
    b = undefined,
    c = undefined;


// 3.2
var a = 12,
    b = 3,
    c = undefined;

// 3.3
var a = 12,
    b = 3,
    c = add(a, b); // = return a + b = 15

So doing something like this:

callFunction(myFunc);
var myFunc = function () {};

Is equal to this:

var myFunc = undefined;
callFunction(myFunc);
myFunc = function () {};

Solution:

Separate your implementation from your action. Make sure everything is defined before you call anything.

Answer 2

Named functions are kinda created in the nowhere, so they become globally available in the scope where they are defined, where as anonymous functions assigned to an identifier are only available once the identifier they are bound to is defined.

So what you are running into there is a simple race condition problem. Your first non-working example should work in case blinkOn() is called after the blikOff variable definition.

Your second non-working example doesn't work because onTimer is not yet defined when setInterval is invoked. Move the variable definition before the setInterval call and it will work.

Answer 3

//like this blinkOff won't be called after the fadeIn
function blinkOn() { $blink.fadeIn( 500, blinkOff ); }
var blinkOff = function() { $blink.fadeOut( 500, blinkOn ); };

It will be called. You just have to make sure that blinkOn is not called (referenced is okay) before (above) the assignment.