6输入项联动自动计算的jQuery动态计算器逻辑异常求助

• 类型处理缺失：通过jQuery获取的输入值为字符串类型，直接参与算术运算会出现隐式转换错误，空值场景下会计算出NaN，回写到输入框后造成显示异常
• 循环触发缺陷：代码主动为输入框赋值时，会再次触发绑定的input事件，形成递归触发链路，最终表现为修改任意项后数值来回跳变、计算逻辑混乱
• 公式逻辑错误：原代码中当前总价值cv的计算存在遗漏，写为(ip/100)*up，没有关联总持有数量tu，实际当前总价值应当和总数量挂钩
• 有效性校验缺失：遇到分母为0、无效输入的场景没有拦截，直接把无效计算结果塞回输入框

核心思路为抽离公共逻辑、增加防循环锁、理顺变量依赖关系，具体实现如下：

;(function ($) {
    // 抽离公共常量，避免重复定义
    const INPUT_FIELDS = ['up', 'tu', 'pv', 'ip', 'cup', 'cv'];
    let isProgrammaticSet = false; // 计算锁，阻断循环触发

    // 工具方法：安全获取输入框数值，无效值返回null
    const getFieldValue = (field) => {
        const val = parseFloat($(`#${field}`).val());
        return isNaN(val) ? null : val;
    };

    // 工具方法：安全设置输入框值，加锁避免触发循环
    const setFieldValue = (field, value) => {
        if (value === null || isNaN(value)) return;
        isProgrammaticSet = true;
        $(`#${field}`).val(value.toFixed(2));
        // 下一渲染帧释放锁
        requestAnimationFrame(() => isProgrammaticSet = false);
    };

    // 全量联动计算
    const recalculateAll = (activeField) => {
        // 获取所有字段当前值
        const fields = Object.fromEntries(INPUT_FIELDS.map(f => [f, getFieldValue(f)]));

        // 采购侧三角关系：up(采购单价)*tu(持有数量)=pv(采购总价值)
        if (activeField === 'up' && fields.tu !== null && fields.up !== null) {
            setFieldValue('pv', fields.up * fields.tu);
        }
        if (activeField === 'tu' && fields.up !== null && fields.tu !== null) {
            setFieldValue('pv', fields.up * fields.tu);
        }
        if (activeField === 'pv' && fields.up !== null && fields.pv !== null && fields.up !== 0) {
            setFieldValue('tu', fields.pv / fields.up);
        }
        if (activeField === 'pv' && fields.tu !== null && fields.pv !== null && fields.tu !== 0) {
            setFieldValue('up', fields.pv / fields.tu);
        }

        // 刷新采购侧更新后的数值
        fields.up = getFieldValue('up');
        fields.tu = getFieldValue('tu');
        fields.pv = getFieldValue('pv');

        // 当前侧三角关系：关联采购侧数值做联动
        if (activeField === 'ip' && fields.pv !== null && fields.ip !== null) {
            // 当前总价值 = 采购总价值 * (1 + 涨幅%)
            setFieldValue('cv', fields.pv * (1 + fields.ip / 100));
        }
        if (activeField === 'cv' && fields.pv !== null && fields.cv !== null && fields.pv !== 0) {
            // 涨幅% = (当前总价值 - 采购总价值)/采购总价值 * 100
            setFieldValue('ip', ((fields.cv - fields.pv) / fields.pv) * 100);
        }
        if (activeField === 'cup' && fields.tu !== null && fields.cup !== null) {
            // 当前总价值 = 当前单价 * 持有数量
            setFieldValue('cv', fields.cup * fields.tu);
        }
        if (activeField === 'cv' && fields.tu !== null && fields.cv !== null && fields.tu !== 0) {
            // 当前单价 = 当前总价值 / 持有数量
            setFieldValue('cup', fields.cv / fields.tu);
        }
    };

    // 绑定输入事件
    $('body').on('input', '.input-number', function () {
        // 代码主动赋值触发的事件直接跳过，阻断循环
        if (isProgrammaticSet) return;
        const activeId = $(this).attr('id');
        recalculateAll(activeId);
    });

    // 清空按钮逻辑
    $('body').on('click', '.clear', function () {
        INPUT_FIELDS.forEach(c => $(`#${c}`).val(''));
    });
})(jQuery)

• 彻底解决循环触发导致的数值乱跳问题
• 所有计算均基于合法输入值，遇到空值、除零场景会保留原有显示，不会出现NaN类无效内容
• 依赖关系清晰可维护：采购侧、当前侧的联动逻辑完全拆分，后续调整公式只需修改对应计算分支
• 无重复代码：公共常量、工具方法抽离后，整体代码量比原实现更精简

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