动态添加DOM表单字段前后计数异常：下拉change触发新增字段时计数未实时更新

现在的写法有两个逻辑错位，直接导致计数永远滞后一次：

• 全局存的fieldCount值，更新动作全在动态追加DOM的操作之前，缓存的值永远赶不上DOM的实际变化
• 执行顺序和要的效果拧了：本来要的是触发change → 先算加字段之前有多少个 → 加字段 → 再算加完之后有多少个。但现在的实际执行顺序是：触发change → 先打之前存的老值 → 在还没加新字段的DOM上重新查一遍数，更新这个缓存值并打印 → 最后才执行加DOM的操作。
  这就导致第一次触发的时候，两次数都是在加DOM之前查的，打出来当然一模一样；等第二次触发的时候，DOM已经在上一次回调里加完新字段了，这时候查出来的数才是上一次加完的结果，看起来就像“这次才拿到正确数”。

把计数的动作直接绑到对应的业务节点上，别靠全局缓存提前存值，每次要数的时候直接实时查DOM，严格按需求顺序走：

• 下拉框触发change事件后，立刻查当前页面所有带.form-control类的元素总数，作为加字段前的数打出来
• 执行原本的动态追加表单字段的DOM操作
• 加完DOM之后，再实时查一次总数，作为加字段后的数打出来

参考代码：

document.getElementById('type').addEventListener('change', () => {
    // 加字段前：实时查当前数量
    const countBefore = document.querySelectorAll('.form-control').length
    console.log('追加前字段数：', countBefore)

    // 这里放原来的动态追加DOM的逻辑
    // ...

    // 加完字段：实时查最新数量
    const countAfter = document.querySelectorAll('.form-control').length
    console.log('追加后字段数：', countAfter)
})

如果确实需要跨事件保留上一次的计数值，只要保证缓存值的更新动作在DOM加完之后做就行，别提前更新：

// 页面刚加载的时候算一次初始值就够了
let lastFieldCount = document.querySelectorAll('.form-control').length
document.getElementById('type').addEventListener('change', () => {
    // 打上次存的最后一次的数，也就是这次加字段前的数
    console.log('追加前字段数：', lastFieldCount)

    // 执行加DOM的逻辑
    // ...

    // 加完DOM再更新缓存，别在加之前就更新
    lastFieldCount = document.querySelectorAll('.form-control').length
    console.log('追加后字段数：', lastFieldCount)
})

注意：如果页面上的表单字段除了这个下拉的change事件，还有其他逻辑会动态增删带.form-control类的元素，尽量在要计数的时候直接实时查DOM，别过度依赖全局缓存，容易出现缓存值和实际DOM状态脱节的问题。

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