javascript - 全局(窗口)变量在 Emberjs 中行为异常

Question

我在我的网络应用程序中使用 Ember-cli。我有一个倒计时组件来在用户界面上显示倒计时器。这是我的组件代码。

export default Ember.Component.extend({
    end_time: 0,
    start_time: 0,
    some_id: 0,
    timer: 0, // Show this in UI - {{timer}} Seconds

    init: function() {
        this._super();
        let end_time = this.get("end_time"),  // 1479476467693
            start_time = this.get("start_time"), // 1479476381491
            some_id = this.get("some_id");
        let wait_time = Math.floor((end_time - start_time)/1000);
        this.set('timer', wait_time);
        let timerName = "timer_" + some_id;
        let _self = this;
        window.initTimer.someTimer[timerName] = setInterval(function() {
            _self.set('timer', wait_time);
            if(wait_time <= 0) {
                clearInterval(window.initTimer.someTimer[timerName]);
            }
            wait_time --;
        }, 1000);
    }
});

如果我将其添加到单个路由中，该组件可以正常工作。

现在，我已将此组件添加到父路由和子 (/:ID) 路由中，因为我需要在两个模板上显示该组件。在子 (/:ID) 模板中，我有一个用于清除计时器的按钮。所以我为该按钮操作添加了这段代码。

buttonAction: function(some_id) {
            let timerName = "timer_" + some_id;
            clearInterval(window.initTimer.someTimer[timerName]);
        }

奇怪的是，当调用buttonAction时，仅子模板上的计时器被清除。父模板上的计时器持续运行。但这两个计时器都分配给单个全局变量 (window.initTimer.someTimer)，并且在我运行 clearInterval() 时应清除。

是否有任何解决方案可以通过单击驻留在子模板上的按钮来清除父路由和子路由上的计时器？无法弄清楚 Ember 对全局变量有什么魔力!!

Answer 1

Ember 在这里没有发挥任何作用，但是您的代码太太复杂了!

有趣的问题来自于some_id来了。如果两者不一样，那么您调用的是哪一个 buttonAction ？

假设您有 ID one和two 。然后你就有了 window.initTimer.someTimer.timer_one 处的两个间隔和window.initTimer.someTimer.timer_two 。现在，如果您清除 window.initTimer.someTimer.timer_one为什么要window.initTimer.someTimer.timer_two也被清除吗？嗯，事实并非如此，这就是您的代码无法工作的原因。

假设你只有一个id，我们调用的是theOnlyOne对于两个计时器。然后init第二个组件的钩子(Hook)将重新分配 window.initTimer.someTimer.timer_theOnlyOne ，因此当您调用 buttonAction 时，只能重置第二个组件。 。这就是为什么您的代码无法工作的原因。

<小时/>

那么你现在应该做什么？首先，您真的应该停止使用全局对象!在 ember 生态系统中，有很多更好的方法可以做到这一点。

对于您的计时器，您应该查看 ember-concurrency .

如果你想使用全局状态，你应该使用 service 。但是我不建议您这样做，因为它违反了 DDAU 原则。然而，为了告诉您什么是做您想做的事情的正确方法，我们需要了解为什么您有这个计时器，它们之间的关系以及为什么您想一键取消它们。也许您会在组件之外有一些计时器状态并将其传递给组件。也许是util可能会有帮助。但这实际上取决于您的用例。