Javascript:如何将不同的对象传递给循环中创建的setTimeout处理程序？

Question

我正在尝试编写一些JS复制jQuery的fadeIn和fadeOut函数.这是我到目前为止的代码:

function fadeIn(elem, d, callback)
{

    var duration = d || 1000;
    var steps = Math.floor(duration / 50);
    setOpacity(elem,0);
    elem.style.display = '';
    for (var i = 1; i <= steps; i++)
    {
        console.log(i/steps + ', ' + (i/steps) * duration);
        setTimeout('setOpacity("elem", '+(i / steps)+' )', (i/steps) * duration);
    }
    if (callback)
        setTimeout(callback,d);
}
function setOpacity(elem, level)
{
    console.log(elem);
    return;
    elem.style.opacity = level;
    elem.style.MozOpacity = level;
    elem.style.KhtmlOpacity = level;
    elem.style.filter = "alpha(opacity=" + (level * 100) + ");";
}

我遇到第一个setTimeout调用的麻烦 - 我需要将对象'elem'(这是一个DOM元素)传递给函数setOpacity.传递'level'变量工作得很好......但是,我得到"elem未定义"错误.我认为这是因为当任何setOpacity调用实际运行时,初始的fadeIn函数已经完成,因此变量elem不再存在.

为了缓解这种情况,我尝试了另一种方法:

setTimeout(function() { setOpacity(elem, (i / steps));}, (i/steps) * duration);

现在的麻烦是,当调用该函数时,(i/steps)现在总是1.05而不是从0递增到1.

如何在正确提升不透明度级别的同时将相关对象传递给setOpacity？

Answer 1

你的"另一种方法"是正确的,这就是通常的做法.

至于i永远是一个常数的问题,这就是闭包的工作原理!你可以看到,当你创建这个函数时,i就像(比如function() { alert(i); })一样,该函数正如他们所说,"捕获"或"绑定"变量i,这样变量i在循环结束后不会消亡,但会继续存在on和仍然从该函数引用.

要演示此概念,请考虑以下代码:

var i = 5;
var fn = function() { alert(i); };

fn();  // displays "5"

i = 6;
fn();  // displays "6"

当它以这种方式编写时,概念变得更加明显,不是吗？由于您正在更改循环中的变量,因此在循环结束后,变量会保留它的最后一个值(1+steps)- 这正是您的函数在开始执行时看到的内容.

要解决此问题,您必须创建另一个将返回函数的函数.是的,我知道,有点令人兴奋,但请耐心等待.考虑我的示例的修订版本:

function createFn( theArgument )
{
    return function() { alert( theArgument ); };
}

var i = 5;
var fn = createFn( i );

fn();  // displays "5"

i = 6;
fn();  // still displays "5". Voila!

这是有效的,因为该fn函数不再绑定变量i.相反,现在它绑定另一个变量 - 除了它们在调用时具有相同的值之外theArgument没有任何关系.现在你可以改变你想要的一切 - 将是无敌的.icreateFnitheArgument

将此应用于您的代码,以下是您应该如何修改它:

function createTimeoutHandler( elemArg, iDivStepsArg )
{
    return function() { setOpacity( elemArg, iDivStepsArg ); };
}

for (var i = 1; i <= steps; i++)
{
    console.log(i/steps + ', ' + (i/steps) * duration);
    setTimeout( createTimeoutHandler( elem, i/steps ), (i/steps) * duration);
}