Операторы в калькуляторе на JavaScript работают преждевременно

Оффтоп javascript
1

При тестировании калькулятора на JavaScript операторы срабатывают сразу. Надо сохранить первое число и знак до нажатия ‘=’. Пример кода:

function initCalc() {
  digitButtons.forEach(btn => {
    btn.addEventListener('click', () => {
      display.value += btn.textContent;
    });
  });
  operatorButtons.forEach(button => {
    button.addEventListener('click', () => {
      temp.num = display.value;
      temp.op = button.textContent;
      display.value = '';
    });
  });
  equalsBtn.addEventListener('click', () => {
    display.value = compute(temp.num, temp.op, display.value);
  });
}

function compute(a, operator, b) {
  const numA = Number(a);
  const numB = Number(b);
  if (operator === '+') return numA + numB;
  if (operator === '-') return numA - numB;
  if (operator === '*') return numA * numB;
  if (operator === '/') return numA / numB;
}

initCalc();
2

Код вроде норм, но интересно, как вы решаете проблему, если пользователь нажимает несколько операторов подряд? Может, стоит добавить проверку на пустое значение или обнулить предыдущую операцию? Какой опыт работы с такими случаями есть у вас?

3

Немного модифицирую логику: при нажатии оператора добавляю проверку, если display пустой, то текущий знак не перезаписывается. А если уже введены два числа – сразу делаю вычисление, что позволяет избежать накопления ошибок. Такой подход помогал избежать лишних проверок и ошибок при быстром клике, делая логику приложения более надёжной.

4

при разработке калькулятора я тоже раньше сталкивался с этой проблемой. получилось, что операторы срабатывали раньше времени, если не обрабатывать последовательность ввода. в моем случае помогло введение небольшого флага, который сигнализировал, сохранено ли первое число. если флаг активирован, дополнительное нажатие оператора просто обновляло знак, а вычисления происходят только после ввода второго числа. такой подход реально уменьшил число ошибок при быстрых нажатиях, хотя требует тщательной проверки логики отображения.

5

Такая задача реально вызывает вопросы. Я использовал флаг, чтобы не принимать повторный оператор, а потом чуть изменял логику при быстром вводе. А как думаете, стоит ли добавлять debounce для защиты от лишних нажатий?

6

Дебаунс иногда помогает, но лучше стараться обрабатывать последовательность ввода через явное блокирование повторных кликов. В моём опыте корректная регистрация состояния (убедившись, что первое число и оператор записаны) даёт достаточную защиту от множественных нажатий. Если уж добавлять задержку, ставьте её так, чтобы не ухудшать UX, а просто предотвращать лишние вычисления.