如何基于每次渲染递增的单个变量生成动态值并优化阈值判断

硬编码if分支的写法本质是没有把「区间规则」和「判断逻辑」解耦，下面两种方案可以完全消除手动写判断分支的问题，适配不同的业务场景。

方案1：等步长区间计算（适配固定步长场景） #

你当前的区间规则是从8开始、步长为8的等距区间，完全可以通过数学运算直接算出匹配的阈值，不需要任何分支判断，性能最好、代码最简洁。

注意原有代码的边界bug：用>和<做判断时，当thisCase刚好等于8/16/24这类边界值，不会触发任何弹窗，使用时可以根据业务需求调整判断符号。

工具函数代码：

/**
 * 等步长区间阈值匹配
 * @param {number} currentVal 当前待判断的值
 * @param {number} startThreshold 起始阈值，默认8
 * @param {number} step 区间步长，默认8
 * @returns {number|null} 命中的区间阈值，未命中返回null
 */
const getMatchStepThreshold = (currentVal, startThreshold = 8, step = 8) => {
  if (currentVal <= startThreshold) return null
  const offset = currentVal - startThreshold
  return startThreshold + Math.floor((offset - 1) / step) * step
}

替换原有业务逻辑：

let thisCase = 1

const increment = () => {
  const incementThisCase = () => {
    console.log(thisCase + 1)
    thisCase += 1
  }
  incementThisCase()

  const matchVal = getMatchStepThreshold(thisCase)
  if (matchVal) alert(matchVal)
}

后续如果要调整步长、起始阈值，只需要在调用工具函数时传参即可，比如要改成步长10、起始阈值5，直接调用getMatchStepThreshold(thisCase, 5, 10)，不需要修改判断逻辑。

方案2：配置化自定义区间（适配非等距的复杂场景） #

如果后续需要支持不规则区间（比如0-10弹10、10-30弹30、30-35弹35这类不等长区间），可以把区间规则抽成配置数组，遍历匹配即可，新增区间只需要往配置数组里加项，不需要写任何判断分支。
工具函数代码：

/**
 * 自定义区间阈值匹配
 * @param {number} currentVal 当前待判断的值
 * @param {Array<{min:number, max:number, value:any}>} rangeList 区间配置
 * @returns {any|null} 命中的区间对应值，未命中返回null
 */
const getMatchRangeValue = (currentVal, rangeList) => {
  for (const range of rangeList) {
    // 区间判断规则和原有逻辑保持一致：左开右开，需要闭区间直接修改判断符号即可
    if (currentVal > range.min && currentVal < range.max) {
      return range.value
    }
  }
  return null
}

使用示例：

// 所有区间规则统一配置在这里，新增/修改区间直接改配置即可
const RANGE_CONFIG = [
  { min: 8, max: 16, value: 8 },
  { min: 16, max: 24, value: 16 },
  { min: 24, max: 32, value: 32 },
  // 新增32-40区间弹32，直接加一行配置即可
  // { min: 32, max: 40, value: 32 }
]

let thisCase = 1
const increment = () => {
  const incementThisCase = () => {
    console.log(thisCase + 1)
    thisCase += 1
  }
  incementThisCase()

  const matchVal = getMatchRangeValue(thisCase, RANGE_CONFIG)
  if (matchVal) alert(matchVal)
}

额外修复点 #

原有HTML里的onclick={increment()}写法有问题：页面渲染时就会直接执行increment，点击时反而不会触发，原生HTML环境要写成onclick="increment()"，如果是React/Vue这类框架，要传函数引用onClick={increment}，不要加括号直接执行。

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