Javascript:函数声明类型对于 setInterval 和 onComplete 很重要吗？

Question

我的问题基本上是这个问题的延伸: var functionName = function() {} vs function functionName() {} 。 我已阅读所有答案，但我认为我仍然缺少这个问题的答案:

为什么函数声明的类型对于 jQuery 的 onComplete 事件和 native setInterval 方法很重要？此外，为什么这对这些很重要，但对普通的 addEventListener 却不重要？

onComplete 事件示例(假设调用 blinkOn()):

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

setInterval 示例:

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

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

我想知道的原因是我希望代码保持一致。如果实现这一点的唯一方法是使用 function a() { ... } ，那没关系。但我认为 var a = function() { ... } 在定义范围方面更清晰。我真的很好奇。

Answer 1

如果您要在调用函数的位置上方定义函数，则不会有任何问题。

vartoggleLight = function () { light = !light; };

setInterval(toggleLight, 500);

您的问题是您正在尝试访问尚不存在的东西。

这与尝试执行此操作完全相同:

var c = a + b,

    a = 12,
    b = 3;

当程序命中c时，a和b不存在。

对于每个函数，将其视为分三步进行:

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

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

第 1 步。
引擎获取命名函数add并计算出它的作用(首先定义所有命名函数)。

第 2 步。
引擎找到函数中的所有变量并将它们设置为undefined:

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

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

第 3 步。
引擎按顺序初始化所有变量。

// 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

所以做这样的事情:

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

等于:

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

解决方案:

将实现与行动分开。 在调用任何内容之前，请确保所有内容都已定义。