Собственные кнопки переключения замедляют работу компьютера после интенсивного использования

Question

У меня есть набор кнопок, которые выполняют определенное действие на моей динамической странице. Я хочу, чтобы некоторые из этих кнопок были кнопками переключения, поэтому, когда я нажимаю на одну из них, кнопка превращает исходное изображение во второе изображение, а при повторном нажатии второе изображение снова превращается в первое. Я решил, что элементы div, которые будут выполнять функцию моих кнопок, относятся к классу ".OptLvl3Tack". Я думаю, что я могу изменить изображение, используя свойство background css, но из-за css имеет дело только с псевдо-событиями hover, посещения, ..., но без события щелчка, я думаю, у меня нет другого выбора, кроме как использовать 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));})});

Код работает нормально, но когда я нажимаю одну кнопку, скажем, 30 раз менее чем за 10 секунд, мой компьютер замедляется, поэтому мне приходится принудительно закрывать веб-браузер, прежде чем весь мой компьютер выйдет из строя. Мой рабочий стол - процессор Intel i3, 4 Гб оперативной памяти, поэтому я думаю, что проблема связана с интенсивным использованием 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')
    }
});