javascript - 使用递归而不是 EVAL

Question

我有一个页面中的项目列表，必须按顺序隐藏，但就在前一个项目完全隐藏之后。

我编写了以下代码，我在其中创建了一个大字符串，将回调插入到先前的回调中，然后使用 eval 执行效果，但尽管代码按预期运行良好，但我完全确定这不是最好的方法来做到这一点。

// get items to hide
    var itemsToHide = jQuery(".hide");

// function responsible to hide the item
    var hideItem = function (item, callback) {
     jQuery(item).hide(100, callback)
    };

// declare an empty function, to be the first to be called
    var buff = function(){};

    for (var i = 0; i < itemsToHide.length; i++) {
// put the previous value of buff in the callback and assign this to buff
     buff = "function(){hideItem(itemsToHide[" + i + "], " + buff + ");}";
    }

// execute the effects
    eval("(" + buff + ")()");

关于如何在没有“邪恶”评估的情况下使用递归实现此效果的任何建议？

Answer 1

用递归隐藏 - 函数式风格

在这种情况下，您知道效果的持续时间，因此您可以按照其他人的建议进行操作。

但是，您可能仍然想知道如何使用更实用的样式，使用简单的递归来实现相同的目的。

所以我在这里向您展示一种方法。

1。代码

<script src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
    $(function() {
        var items = jQuery(".to-hide");
        (function hideRec() {
            if (items.length == 0) {
                window.alert("The end.");
                return;
            }
            var toHide = jQuery(items[0]);
            items = items.slice(1);
            toHide.hide("100", hideRec);
        })();
    });
<script>

<ul>
    <li class="to-hide">...</li>
    <li class="to-hide">...</li>
    <li class="to-hide">...</li>
    <li class="to-hide">...</li>
    <li class="to-hide">...</li>
<ul>

2。它是如何工作的？

我们首先从 jQuery 获取一个数组，其中包含我们希望隐藏的对象。

然后我们创建一个命名的匿名函数，它将在其定义后立即执行——它是 (function() { ... })(); 模式.即使它是一个匿名函数，我们也会给它起一个名字，以便我们能够轻松地递归调用它。

请注意，您可以在不给匿名函数命名的情况下实现相同的目的——如果您不了解 JavaScript 如何处理作用域，这听起来可能有点奇怪——使用更晦涩的版本:

(function() {                            // Anonymous function without a name
    if (items.length == 0) {
        window.alert("The end.");
        return;
    }
    var toHide = jQuery(items[0]);
    items = items.slice(1);
    toHide.hide("100", arguments.callee); // Recursive call to anonymous function
})();

这次我们使用了 arguments.callee 代表函数本身的事实——所以不需要给匿名函数一个名字。

整个魔法都在这个递归匿名函数中——这是一个闭包。

hideRec 匿名函数捕获items 数组。在检查里面还有东西之后，它会删除第一个元素并将其存储在本地 toHide 变量中(用 jQuery 正确包装)。

最后，它使用 jQuery 隐藏元素，并将这个匿名函数作为回调传递——jQuery 将在完成效果后再次调用它。

我希望这已经足够清楚了。

祝你好运!