javascript - javascript 中的递归函数、setTimeout 和 'this' 关键字

Question

假设我想用 onClick 方法调用一个函数。像这样:

<li class="inline" onclick="mve(this);" >TEMP</li>

我有一个如下所示的 JS 函数:

function mve(caller){
caller.style.position = "relative";
caller.style.left = (caller.style.left+20) +'px';
var foo = setTimeout('mve(caller)', 2000);
}

我的问题是元素(调用者引用的元素)在初始 onClick 调用后未定义。至少 Firebug 是这么告诉我的。

我确信这是一个简单的解决方案，那么简单解释一下原因和方法如何？

另外，如果我这样运行它:

function mve(caller){
caller.style.position = "relative";
caller.style.left = (caller.style.left+20) +'px';
}

我认为元素会在每次点击时向右移动 20px，但事实并非如此。想法？

Answer 1

setTimeout() 在全局范围内执行一个字符串参数，因此您的 this 值不再存在，您的参数 caller 也不再存在。这是不将字符串参数与 setTimeout 一起使用的众多原因之一。使用像这样的实际 javascript 函数引用，解决相应地传递参数是一个很容易的问题:

function mve(caller){
    caller.style.position = "relative";
    caller.style.left = (caller.style.left+20) +'px';
    setTimeout(function() {
        mve(caller)
    }, 2000);
}

对于你的问题的第二部分，caller.style.left 将有像 20px 这样的单位，所以当你添加 20 对于它，您将得到 20px20 并且浏览器无法理解该值，因此什么也不会发生。您需要从中解析出实际数字，将数字加 20，然后像这样重新添加单位:

function mve(caller){
    caller.style.position = "relative";
    caller.style.left = (parseInt(caller.style.left), 10) +20) + 'px';
    setTimeout(function() {
        mve(caller)
    }, 2000);
}

这个函数缺少的东西是停止重复的方法。正如你现在拥有的那样，它会永远持续下去。我可能建议传入这样的多次迭代:

function mve(caller, iterationsRemaining){
    caller.style.position = "relative";
    caller.style.left = (parseInt(caller.style.left), 10) +20) + 'px';
    if (--iterationsRemaining) > 0) {
        setTimeout(function() {
            mve(caller, iterationsRemaining)
        }, 2000);
    }
}

此外，您可能很想知道这实际上并不是一个递归函数。那是因为 mve() 函数调用 setTimeout() 然后立即结束。 setTimeout() 会在一段时间后执行 mve() 的下一次迭代，并且多个函数调用的堆栈帧上没有累积，因此没有实际的递归。乍一看代码确实像递归，但从技术上讲不是。