Почему тормозит скрипт спустя несколько событий?

Question

[babyflowercry]

Здравствуйте
Делаю календарь для сохранения цен. При перелистывании далее/назад, спустя 5-6 кликов начинает тормозить скрипт и с каждым кликом всё дольше и дольше думает. Смотрел память, вроде кушает мало. Не могу разобраться в чём косяк

async function calendarInit(year = undefined, month = undefined) {
    let today_from_server = new Date(),
        parsed_date = [],
        html = `<tr>`,
        date = new Date();

    if(year === undefined || month === undefined) {
        today_from_server = await serverDate;
        parsed_date = parseDate(today_from_server);
        date = new Date(parsed_date[2], parsed_date[1] - 1, 1);
    } else {
        date = new Date(year, month, 1);
    }

    current_monthyear.innerText = `${date.getFullYear()} ${months_on_russian[date.getMonth()]}`;

    let i = 1;

    while(i <= getLastDayOfMonth(date.getFullYear(), date.getMonth())) {
        html += `<th>${i}</th>`;

        if(i === getLastDayOfMonth(date.getFullYear(), date.getMonth())) {
            html += `</tr><tr id="row-with-prices">`;
            i = 1;
            break;
        }

        i++;
    }

    while(date.getDate() <= getLastDayOfMonth(date.getFullYear(), date.getMonth())) {
        html += `<td><input type="text" data-date="${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}"></td>`;

        if(date.getDate() === getLastDayOfMonth(date.getFullYear(), date.getMonth())) {
            html += `</tr>`;
            break;
        }

        date.setDate(date.getDate() + 1);
    }

    prices_table.innerHTML = html;

    let prev_month_click = function() {
        calendarInit(date.getFullYear(), date.getMonth() - 1);
    };

    let next_month_click = function() {
        calendarInit(date.getFullYear(), date.getMonth() + 1);
    };

    prev_month.addEventListener('click', prev_month_click);
    next_month.addEventListener('click', next_month_click);
}

Answer 1

[Stalker_RED]

при каждом клике на prev_month или prev_month вызывается calendarInit, который накладывает все больше и больше обработчиков, и КАЖДЫЙ из обработчиков вызывает calendarInit...
В общем на шестом клике количество обработчиков уже 64 штуки, и каждый из них меняет DOM.

Не делайте так.

Comments

[babyflowercry]

Я выносил обработчики за функцию, разницы не было никакой

[babyflowercry]

Спасибо большое, вроде помогло
Хотя я на это подумал ещё с самого начала, но в тот раз почему-то не помогло

Answer 2

[0xD34F]

У вас при каждом вызове calendarInit назначаются дополнительные обработчики кликов для prev_month и next_month. То есть, при каждом клике количество обработчиков у вас удваивается. Нажали один раз - к одному существующему добавился ещё один, стало два. Нажали второй раз - каждый из этих двух обработчиков добавил по ещё одному, стало четыре. После третьего клика - стало восемь, после шестого - 64. Как думаете, может это стать причиной торможения?

Comments

[babyflowercry]

Спасибо большое!