JavaScript如何在setInterval函数中使用另一函数的入参变量

你遇到的问题是px是addindent函数的局部参数，仅在函数执行的内部作用域生效，外部的setInterval回调默认无法访问。最简单的解决方案是在两个函数的公共外层作用域定义变量存储最新的px值，每次调用addindent时更新该变量即可。

方案1：外层作用域存储变量（最简便） #

let textarea = document.getElementsByTagName('textarea')[0]
// 公共外层定义变量存储当前缩进值，可自行设置默认值
let currentIndentPx = '0px'

function addindent(px){
  // 调用函数时更新外层变量
  currentIndentPx = px
  textarea.style.textIndent = px;   
}

setInterval(function(){
  // 直接读取外层存储的变量即可
  document.getElementsByTagName('div')[0].style.textIndent = currentIndentPx;
  // 保留你原本在setInterval里的其他逻辑
},1000)

方案2：用IIFE避免污染全局作用域 #

如果你不想把变量挂载到全局作用域，可以把所有逻辑包裹在立即执行函数中，只需把HTML内联事件需要用到的addindent函数暴露到window即可：

(function(){
  let textarea = document.getElementsByTagName('textarea')[0]
  let currentIndentPx = '0px'

  function addindent(px){
    currentIndentPx = px
    textarea.style.textIndent = px;   
  }
  // 暴露给HTML的onclick绑定使用
  window.addindent = addindent

  setInterval(function(){
    document.getElementsByTagName('div')[0].style.textIndent = currentIndentPx;
    // 保留你原本的其他逻辑
  },1000)
})()

如果你的项目支持ES6模块，也可以直接用模块作用域，无需额外包裹IIFE，也不会产生全局变量污染。

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