Question

我有一个div，其中包含用户单击以显示姓名的照片。我为此设置了一个时髦的翻转效果。下次单击时，将通过ajax加载新照片和名称以替换旧照片和名称。

为了提供平滑的过渡，我将其设置为翻转90度（即变为不可见），加载新的设置，然后完成翻转以显示照片。这是执行此操作的代码，运行精美：

$name_div.one("click", function(){
        $flipper.css("transform", "rotateY(270deg)") ;

        // Update mastery to level 1        
        updateMastery(student, 1, i)

        $flipper.css("transform", "rotateY(0deg)") ;
    })

只有一个问题... updateMastery（）函数在转换完成之前开始运行。这意味着新名称可以在隐藏之前替换旧名称。

$name_div.one("click", function(){
        $flipper.css("transform", "rotateY(270deg)") ;

        // Update mastery to level 1        
        $flipper.on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', 
            function() {
                 updateMastery(student, 1, i)
            });

        $flipper.css("transform", "rotateY(0deg)") ;
    })

此代码可以执行我想要的操作。它等待过渡结束，然后加载新名称/照片，然后完成翻转。在最初的几次单击中，它运行良好，但是当我单击并浏览照片时，脚本会变得越来越慢，直到最终挂起我的浏览器。

有人知道为什么.on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd'...脚本会这样做吗？每次都在浏览器中存储内容吗？有什么我可以阻止或清除的事情吗？

谢谢

Answer 1

根据@Pointy和@BobRodes的评论进行回答：

由@Pointy标识的问题：

每次单击都将另一个事件处理程序添加到“触发器”中。添加一个另一个事件处理程序中的事件处理程序几乎总是不做正确的事

解决方案1（@Pointy）：

最简单的方法是将标记保留在某处，然后跳过.on() 如果已设置，请致电。

这是一个很好的解决方案。但是，由于我有多个发生这种过渡的示例，但只希望在某些情况下（特别是单击的一个“边”而不是单击另一边时）才存在处理程序，所以这给我带来了太多额外的代码

解决方案2（@BobRodes）：

您应该能够使用.off()关闭处理程序一次触发后关闭

这很完美：

$flipper.on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', 
            function() {
                $flipper.off() ;
                updateMastery(student, 1, i, $flipper) ;     

            });

后记

您是否尝试过使用.one()而不是.on()？〜@ Louys Patrice Bessette

如果我仅附加一个处理程序，则可以使用。但是，因为我附加了多个处理程序（以提供跨浏览器支持），所以.one()仅删除了已触发的处理程序。其余的保留下来，每次点击都会添加进来。

为什么此javascript每次点击的速度越来越慢？

1 个答案: