使用递归而不是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中获取一个包含我们想要的对象的数组to-hide.

然后我们创建一个命名的匿名函数,它将在定义后立即执行 - 它就是(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将再次调用它.

我希望这很清楚.

祝好运!