为什么每次点击javascript都会越来越慢？

我有一个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)") ;
    })

这段代码符合我的要求。它等待转换结束，然后加载新名称/照片，然后完成翻转。在最初的几次点击中，它运行得很好，但是当我点击并浏览照片时，脚本会越来越慢，直到最后挂起我的浏览器

知道（'transitionend WebKittTransitionEnd otTransitionEnd otTransitionEnd otTransitionEnd MSTransitionEnd'…脚本为什么会这样做吗？它每次都在浏览器中存储一些东西吗？我可以做些什么来防止或清除这些吗

---

谢谢

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

问题，如@Pointy:

---

每次单击都会向“flipper”添加另一个事件处理程序 另一个事件处理程序中的事件处理程序几乎总是不相同的 正确的做法

---

解决方案1（@Pointy）：

最简单的方法是在某处保留一个标志，然后跳过（）上的

.on（）

如果已经设置好，请致电

这是一个很好的解决方案。但是，因为我有多个发生这种转换的示例，但只希望处理程序在某些情况下（特别是当单击了的“一侧”而不是另一侧时）出现在那里，这导致我需要太多额外的代码

---

解决方案2（@BobRodes）：

您应该能够使用

.off（）

在处理程序触发一次后关闭处理程序

这非常有效：

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

            });

---

Postscript

您是否尝试过使用

.one（）

而不是

.on（）

？~@Louys Patrice Bessette

---

如果我只附加了一个处理程序，这会起作用。但是，由于我附加了多个处理程序（以提供跨浏览器支持），因此只有已触发的处理程序会被

删除。one（）

。其他处理程序会保留下来，并在每次单击时添加到。

每次单击都会将另一个事件处理程序添加到“flipper”。在另一个事件处理程序中添加事件处理程序几乎总是不正确的。啊哈…关于如何解决这个问题有什么建议吗？您只需要添加一次处理程序。您的意思是使用$flipper.one而不是$flipper.on？在Google上搜索“css转换完成后的javascript调用函数”我发现，它有许多想法，您可能会发现这些想法很有用。您应该能够使用

.off

在处理程序触发一次后关闭处理程序，尽管简单地将转换处理程序放在click处理程序之外应该可以像Pointy建议的那样工作。