自己设计的切换按钮在密集使用后会减慢我的电脑速度

Question

我有一组在我的动态页面中执行特定操作的按钮。我希望其中一些按钮成为切换按钮，因此当我单击其中一个按钮时，该按钮会将原始图像变成第二张图像，再次单击时，第二张图像再次变成第一张图像。我已经决定将执行我的按钮功能的 div 属于“.OptLvl3Tack”类。我认为我可以使用背景 css 属性更改图像，但由于 css 仅处理伪事件悬停、访问、...，但没有单击事件，我认为除了使用 Javascript 之外别无选择。我为此设计了这段代码：

function IfNoTacked(Tack){
    $(Tack).css("background", "url('{{ STATIC_URL }}ThumbTack_Click.png')");
    $(Tack).click(function(){IfTacked($(Tack))});
}
function IfTacked(Tack){
    $(Tack).css("background", "url('{{ STATIC_URL }}ThumbTack.png')");
    $(Tack).click(function(){IfNoTacked($(Tack))});
}   
$(".OptLvl3Tack").each(function(){$(this).click(function(){IfNoTacked($(this));})});

代码运行良好，但是当我点击一个按钮时，比如说，在不到 10 秒的时间内点击 30 次，我的电脑变慢了，所以我必须在我的整个电脑崩溃之前强制关闭网络浏览器。我的桌面是intel i3 处理器，4gb RAM，所以我认为问题与javascript的密集使用有关。这是正确的吗？还是与 DOM 相关的问题？ 有没有不同的方法来使用 javascript 执行这个操作？不使用javascript？

Answer 1

我认为您每次都附加一个新的点击处理程序。一段时间后，您的处理程序将被执行多次。

尝试删除处理程序或在变量中记住按钮的状态并在点击处理程序中决定要做什么。

Answer 2

很可能是因为您使用了每一个。 Afaik 你不必使用它：

$(".OptLvl3Tack").click(function() {
IfNoTacked($(this));
});

但我会将其全部设为 1 个功能：

$(".OptLvl3Tack").click(function() {
    if($(this).hasClass('active')) {
        $(this).css("background", "url('{{ STATIC_URL }}ThumbTack.png')");
        $(this).removeClass('active')
    } else {
        $(this).css("background", "url('{{ STATIC_URL }}ThumbTack_Click.png')");
        $(this).addClass('active')
    }
});