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); } )，正如他们所说，该函数“捕获”，或“绑定(bind)” 变量 i , 所以变量 i不会在循环结束后死亡，而是继续存在并且仍然被该函数引用。

为了演示这个概念，请考虑以下代码:

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函数不再绑定(bind)变量i .相反，现在它绑定(bind)了另一个变量 - theArgument , 这与 i 无关, 除了它们在调用 createFn 时具有相同的值外.现在您可以更改您的 i所有你想要的 - theArgument将立于不败之地。

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

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