如何在第二个函数中使用第一个函数中的值

Question

我还是纯编程初学者。我有这个功能

window.onload = function () {
  currentWidth = window.innerWidth
  console.log(currentWidth)
}

这个函数在 console.log 中显示我重新加载页面时我的窗口宽度是多少。

然后我有一点复杂的功能，返回也功能。

const resizeHandler = (function () {
  const isBig = () => window.innerWidth > 850
  let wasBig = isBig()
  return function handler(event) {
    //if (isBig() == wasBig) return; // no change
    if (window.innerWidth > 850) {
      $('.side-bar').removeClass('non-active')
      wasBig = true // future use
    } else {
      $('.side-bar').addClass('non-active')
      wasBig = false
    }
  }
})()
window.addEventListener('resize', resizeHandler)

我在名为

currentWidth

的变量中有宽度值我想当我用变量名currentWidth替换

window.innerWidth

时它很好，但它不是。

我的逻辑是否正确，或者在 javascript 中是“更聪明”的方式来做到这一点？

Answer 1

在页面加载时也直接调用调整大小处理程序。

resizeHandler();
window.addEventListener('resize', resizeHandler);

Answer 2

在函数内声明的变量是函数范围的，这意味着它们仅存在于该特定函数内。
尝试：

var currentWidth;
window.onload = function () {
    currentWidth = window.innerWidth
}

所以现在您可以按照您的要求将

window.innerWidth

替换为

currentWidth

。

---

byLL