Javascript 从另一个函数访问另一个属性

我正在使用Gsap创建漂亮的动画

我即将在这里生成糟糕的Javascript，希望能得到一些帮助

let navOpen = false;

const navAnim = () => {
  var tl = gsap.timeline({})
  tl.to(nav, 1, { x: 0, y: 0, z: 0 });
}

const checkNavigation = () => {
  navOpen ? navAnim.tl.play() : navAnim.tl.reverse()
}

const navigation = () => {
  if (!navOpen) {
    navOpen = true;
    checkNavigation();
  } else {
    navOpen = false;
    checkNavigation();
  }
}

navBrgr.addEventListener("click", () => {
  navigation();
});

打开导航的函数只是创建一个新的时间线，然后执行其中的代码

要关闭我的导航，它需要执行完全相同的操作，但这次将其反转

目前我的代码导致

无法读取未定义的

的属性“play”，这是有意义的，因为我无法从此

导航（）访问
tl
函数。我怎样才能做到

我愚蠢到以为在我的
navAnim（）
中放一个
return（）
就足够了，唉

非常感谢
您需要确保
navAnim
返回
tl
，以便在
检查导航
功能中使用该值

将
navAnim
和
checkNavigation
功能更新为以下内容：

const navAnim = () => {
  var tl = gsap.timeline({})
  tl.to(nav, 1, { x: 0, y: 0, z: 0 });
  return tl
}

const checkNavigation = () => {
  const tl = navAnim()
  navOpen ? tl.play() : tl.reverse()
}

这应该能奏效


清洁守则建议：
这就避免了创建一系列可以用简单的一行程序解决的函数。
navAnim
是一个不返回任何内容的函数
let navOpen = false;
const tl = gsap.timeline({})
tl.to(nav, 1, { x: 0, y: 0, z: 0 });

const toggleNav() {
  navOpen = !navOpen
  if (navOpen) tl.play()
  else tl.reverse()
}

navBrgr.addEventListener("click", () => {
  toggleNav();
});