如何实现点击单个按钮时循环切换不同参数执行相同JS函数

第一步：调整原run函数，支持主动终止 #

原函数没有返回定时器ID，无法手动停止运行，先做少量修改：

function run(box, pos) {
  // 返回定时器ID，用于后续清除
  return setInterval(() => {
    // 新增let声明，避免i成为全局变量造成冲突
    let i = pos[0]
    if (i > box.length - 1) {
      i = 0
      box[box.length - 1].classList.remove('color')
    }
    if (i > 0) {
      box[i - 1].classList.remove('color')
    }
    box[i].classList.add('color')
    i++
    pos.unshift(i)
    pos.pop()
    console.log(pos)
  }, 500)
}

第二步：定义状态变量存储核心数据 #

// 存储三组参数，替换为你实际的box和pos值
const paramGroups = [
  { box: box1, pos: pos1 }, // 第一组参数
  { box: box2, pos: pos2 }, // 第二组参数
  { box: box3, pos: pos3 }  // 第三组参数
]
// 存储当前运行的定时器ID
let timerId = null
// 当前使用的参数组索引，初始0对应第一组
let currentGroupIndex = 0
// 替换为你页面实际的按钮选择器
const switchBtn = document.querySelector('#switch-btn')

第三步：绑定初始执行和点击切换逻辑 #

// 页面加载默认运行第一组参数
timerId = run(paramGroups[currentGroupIndex].box, paramGroups[currentGroupIndex].pos)

// 按钮点击事件
switchBtn.addEventListener('click', () => {
  // 停止当前正在运行的定时器
  clearInterval(timerId)
  // 索引循环+1，模3实现三组循环切换
  currentGroupIndex = (currentGroupIndex + 1) % 3
  // 传入新参数执行函数，更新定时器ID
  const currentGroup = paramGroups[currentGroupIndex]
  timerId = run(currentGroup.box, currentGroup.pos)
})

可选优化 #

如果切换时需要立刻清空上一组box的高亮状态，可以在clearInterval(timerId)后添加以下逻辑：

const prevGroup = paramGroups[(currentGroupIndex + 2) % 3]
prevGroup.box.forEach(el => el.classList.remove('color'))

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