JavaScript计算器evaluateOperation函数循环结束后如何避免重复执行？

问题根因 #

• 重复调用计算函数：evaluate按钮点击事件中，先调用一次evaluateOperation检测除零错误，后续正常分支又再次调用了一次该函数，导致整套计算逻辑执行两轮
• 历史数据未清空：单次计算完成后没有清空operatorStorage存储的历史运算符、num_display存储的历史操作数，同时计数类变量没有重置，后续如果继续运算会叠加历史数据
• 循环逻辑冗余：多运算符场景的循环中，每次更新num_display.result的逻辑存在无效操作，放大了重复执行的问题

修复方案 #

1. 修正evaluate点击事件的重复调用逻辑 #

只调用一次计算函数复用结果，计算完成后清空历史操作数据避免残留：

evaluate.addEventListener('click', () => {
  // 未选择运算符直接点击等号直接返回
  if (operatorType == undefined || isNaN(operatorType) == true && Object.keys(num_display).length == 1) {
    return;
  } else {
    // 未输入第二个数字直接点击等号，直接返回第一个输入值
    if (input.value == '') {
      if (operatorType == undefined || isNaN(operatorType) == true) {
        operatorType = '+';
      }
      input.value = `${num_display['result']}`;
      operationResult = Number(input.value);
      console.log(operationResult);
      return operationResult;
    } else {
      // 仅调用一次计算函数，复用返回结果
      let calcResult = evaluateOperation(iterable_for_result, iterable_for_post_result);
      // 处理除零错误
      if (calcResult == Infinity) {
        console.log('Bwana');
        calcResult = 'YERRRRR';
        input.value = `${calcResult}`;
        operationResult = 0;
        num_display['result'] = operationResult;
      } else {
        input.value = `${calcResult}`;
        operationResult = Number(input.value);
        num_display['result'] = operationResult;
      }
      // 计算完成后清空历史操作数、运算符和计数变量
      for (let i = count; i >= 1; i--) {
        delete num_display[`post_op_result ${i}`];
        delete operatorStorage[`Operator ${i}`];
      }
      count = 0;
      operatorSequence = 0;
      iterable_for_post_result = 1;
      iterable_for_result = 0;
      clicked = 1;
      decimalClicks = 0;
    }
  }
  console.log(num_display);
});

2. 优化evaluateOperation循环逻辑 #

去掉无效赋值操作，避免计算结果异常：

function evaluateOperation(iterable_variable_1, iterable_variable_2) {
  let postResultIterable = 0;
  let resultNumIterable = -1;
  if (Object.keys(num_display).length > 2) {
    console.log('Run');
    for (let i = 1; i <= Object.keys(operatorStorage).length; i++) {
      console.log(i);
      resultNumIterable++;
      postResultIterable++;
      console.log(operatorStorage[`Operator ${i}`]);
      console.log(storedKeys(postResultIterable));
      operationResult = operate(operatorStorage[`Operator ${i}`], resultNum1(resultNumIterable), storedKeys(postResultIterable));
      // 直接赋值即可，无需先置0再加
      num_display['result'] = operationResult;
    }
    return num_display['result'];
  } else {
    return operate(operatorType, resultNum1(iterable_variable_1), storedKeys(iterable_variable_2));
  }
}

内容的提问来源于stack exchange，提问作者Muaad Ahmed