时间戳

首页 > 解决方案 > 从对象返回和更新值

javascript - 从对象返回和更新值

问题描述

我正在使用一个使用“场景”的动画库。场景的结构如下：

const animations = animationLibrary({
    scenes: {
        sceneOne: {
            appear() {
                // do something when scene appears
            },
            disappear() {
                // do something when scene disappears
            }
        },
        sceneTwo: {
            appear() {
                // do something when scene appears
            },
            disappear() {
                // do something when scene disappears
            }
        },
    }
})

对于一个大型项目，我有很多场景，大约 40 个。在过去，对于这个项目，范围不是问题，因为我通常不需要在多个函数中访问同一个变量，所以我只需要在函数中定义一个变量并在那里使用它就可以了。但是，越来越多的情况下，我想在一个方法中执行 setInterval 并在不同的函数中执行 clearInterval。我目前正在这样做：

var setIntervalId;

const animations = animationLibrary({
    scenes: {
        sceneOne: {
            appear() {
                setIntervalId = setInterval(myFunc, 1000)
            },
            disappear() {
                clearIntervalId(setIntervalId)
            }
        },
    }
})

我遇到的问题是随着主要场景对象的增长，其中有许多场景，似乎组织得很糟糕，有许多变量，彼此无关，出于范围原因存储在动画 const 之外。我尝试在场景中编写自己的函数，或者在场景中添加对象来存储值，但是每当我尝试在函数中返回它们时，我都会在控制台中遇到未定义的错误。

有没有办法让我存储嵌套在单个场景中的变量或值对象，并且仍然能够在同一个场景中跨函数访问和更新这些变量/值？

标签： javascript

解决方案

只需为间隔添加一个属性。

let animation = {
  scenes: {
    sceneOne: {
      intervalRef:null,
      count:0,
      appear() {
        console.log("Start");
        this.intervalRef = setInterval(()=> console.log(this.count++), 1000);
      },
      disappear() {
        console.log("Finish");
        clearInterval(this.intervalRef);
      },
    },
  },
};

animation.scenes.sceneOne.appear();
setTimeout(()=>{
  animation.scenes.sceneOne.disappear();
},5000)

推荐阅读