javascript - animationend 在递归函数中不起作用

Question

我有下面的函数，我想用它循环遍历存储在数组中的每个 id，它指向我添加到 div 的动态 HTML 元素。然后，我想更改 CSS 类并添加一个 animationend 事件监听器。一切正常，除了我注意到事件在动画完成之前触发。最终发生的是数组中的所有元素同时进行动画处理。我希望每个元素都连续动画。我一直在研究代码并在网上寻找答案，但我被卡住了。有什么想法吗？

Javascript 代码:

        function moveLines(count){
            if(count<=introLinesBlurEls.length){
                thisMoveLine = document.getElementById(introLinesBlurEls[count]);
                thisMoveLine.className = 'introImgBlurAnimate';
                count++;
                thisMoveLine.addEventListener('animationend', moveLines(count), false);
            }else{
                alert('Hey. I am done.');
            }
        }

Answer 1

您正在执行您的处理程序，您要在其中分配它。

thisMoveLine.addEventListener('animationend', moveLines(count), false);

这是在执行 moveLines()。您需要推迟 moveLines 的执行，直到事件发生。为此，您需要创建一个闭包，以便您可以绑定(bind)计数参数。

thisMoveLine.addEventListener('animationend', moveLines.bind(this, count), false);

您可以使用 .bind() 或将其包装在函数中以保留作用域

thisMoveLine.addEventListener('animationend', function(){ moveLines(count); }, false);