为什么点击滑块控制按钮时变量offset的值不会发生变化？

问题根因 #

JavaScript中基础类型（number/string/boolean等）是按值传递的，你调用left函数时传入的offsetHP只是把值复制给了函数形参offset，你在函数内部修改offset += 180改的只是这个临时副本，不会影响外部的offsetHP原始变量，所以每次点击传进去的值都是初始的0，计算结果永远是180。

修复方案 #

方案1：原生JS/TS项目直接操作外部变量 #

不要把offset作为参数传递，直接修改外层声明的offset变量即可：

let offsetHP:number = 0
const left = (refSlider:any) => {
  offsetHP += 180
  refSlider.current.style.left = offsetHP + 'px'
  console.log(offsetHP) // 第1次点击输出180、第2次输出360，符合预期
}

// 点击事件绑定无需传offset参数
<div className="left-button" onClick={() => left(refSliderHp)}>

方案2：React/Vue等框架项目使用响应式状态 #

如果是框架项目，普通let声明的变量无法持久化存储状态、也不会触发视图更新，要使用框架提供的响应式API，以React为例：

import { useState, useRef } from 'react'

// 组件内部代码
const [offsetHP, setOffsetHP] = useState(0)
const refSliderHp = useRef<HTMLDivElement>(null)

const left = (refSlider: React.RefObject<HTMLDivElement>, offset: number, setOffset: React.Dispatch<React.SetStateAction<number>>) => {
  const newOffset = offset + 180
  setOffset(newOffset)
  refSlider.current?.style.left = newOffset + 'px'
  console.log(newOffset)
}

// 点击事件绑定
<div className="left-button" onClick={() => left(refSliderHp, offsetHP, setOffsetHP)}>

多个滑块的场景下，只要每个滑块对应单独的offset状态和ref，就可以复用同一个left函数。

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