Question

我有一些返回getById getByClass的函数和一个具有id或class的html元素数组。问题是我想将这样的动画应用到每个元素和这些数组中，每个人都在同一个函数中，我现在就有这个。

var slideDown = function (elem, to) {
    var e = getById(elem),
        st, i;
    if (e == false) {
        e = getByClass(elem);
    }
    for (var i in e) {
        //alert(e[i].offsetHeight + e[i].nodeName + e[i].textContent.trim());
        st = setInterval(doAnim(e[i]), 1000);

        function doAnim(e, h) {
            h = e.offsetHeight;
            if (h < to) {
                e.style.height = h + "px";
                h++;
                console.log(h);
                doAnim(e[i], h);
            }
        }
    }
}

问题在于，for循环中的动画函数只会运行两次，在这种情况下，数组包含2 xq项目，如果我放出也运行两次xq for setInterval在内，我的问题是如何解决这个问题，我的意思是，就像修改数组元素一样，而不必去索引索引。在此先感谢，不要指望像USA JQUERY这样的答案或类似的东西，我知道jquery会这样做，但我正在尝试调查新事物，但是请锁定我这个问题。

Answer 1

首先，setInterval将函数作为第一个参数。但是，不是传递对函数的引用，而是调用返回undefined的函数（即，它没有返回值）。因此，setInterval接收undefined作为第一个参数。

相反，您需要传递一个函数引用：

st = setInterval(doAnim(e[i]), 1000);

function doAnim(e, h) {
    return function() {
        h = e.offsetHeight;
        if (h < to) {
            e.style.height = h + "px";
            h++;
            console.log(h);
            doAnim(e[i], h);
        }
    };
}

接下来，您将使用for..in枚举器语句迭代集合。这会产生意想不到的后果。相反，请使用常规for循环或Array.forEach()（如果它是数组）。

最后，你永远不会终止你的间隔。您应该在if语句中添加clearInterval，而不是将函数逻辑包装在if语句中。

动画数组元素

1 个答案: