Angular 6 setTimeout 和 clearTimeout 错误答案

【问题标题】：Angular 6 setTimeout and clearTimeout errorAngular 6 setTimeout 和 clearTimeout 错误
【发布时间】：2019-08-09 11:30:39
【问题描述】：

我有一个 Angular 6 奇怪的问题。

我正在使用 setTimeout 和 clearTimeout 函数来启动/取消超时。但是，这有时有效，有时无效。即使用户触发了（点击）事件并运行了 clearTimeout，有时它也会强制玩家抓两张牌。

这里是代码

//an event that says we must call uno 
this._hubService.mustCallUno.subscribe(() => {
      this.mustCallUno = true;
      this._interval = window.setInterval(() => {
        this.countdown -= 100;
      }, 100);
      this._timer = window.setTimeout(() => {
        if (this.mustCallUno) {
            this.drawCard(2);
            this.callUno();
        }
      }, 2000);
    });

// a function player calls from UI to call uno and not draw 2 cards
  callUno() {
    this.mustCallUno = false;
    window.clearTimeout(this._timer);
    window.clearInterval(this._interval);
    this.countdown = 2000;
  }

所以即使玩家调用 callUno() 函数，setTimeout 也会被执行。更糟糕的是，代码会在 setTimeout if( this.mustCallUno) 内进行第一次 if 检查，这无论如何都应该是 false，因为我们只是在调用 callUno() 函数 this.mustCallUno = false; 时将其设置为 false。

我在 window.setTimeout 之前使用了 setTimeout（返回 NodeJS.Timer），结果是一样的。

【问题讨论】：

请问你为什么不使用 rxjs observables ？
@Florian 我对这个 Angular 和 rxjs 的世界有点陌生。你能用 observable 发布解决方案并将我链接到一些有用的“入门”页面吗？非常感谢
能否分享完整代码！我真的不明白你打算在这里做什么
@tonymarkoc ok。我将向您展示带有 rxjs 解决方案和文档页面的 stackblitz。
@Aravind 其余的代码真的不相关。我们通过 websocket 得到一个玩家必须调用 uno 的事件（我在上面写的第一个函数 - 订阅），然后用户有 2 秒时间按下 UI 中的 UNO 按钮，该按钮将调用应该清除超时的 callUno() 函数，这样玩家就不会抽 2 张牌。

标签： javascript angular typescript angular6

【解决方案1】：

你使用的是angular6+，所以我建议你使用响应式编程库，例如rxjs

我给你做了一个小例子here。

【讨论】：

嗨。问题是我从来没有取消订阅 observables。您的回答帮助我意识到了这一点，所以我将其标记为正确。
很高兴它帮助了你！

【解决方案2】：

检查this._hubService.mustCallUno.subscribe 中的函数运行两次或多次的可能性，通常最初是您可能没有预料到的。将记录器放入传递给mustCallUno.subscribe 和callUno 的函数中。

在这种情况下，this._timer 和 this._interval 将有不同的引用，而它们持有的旧引用未被清除，因为 callUno 未被调用或被调用的次数少于回调订阅中。

【讨论】：

我也试过在订阅方法的前两行添加window.clearTimeout(this._timer); window.clearInterval(this._interval); ，没有效果。
是的，但它在callUno 中，对吗？是否保证callUno 会在下次调用回调订阅之前被调用？
它看起来不像是一个好的架构，但是放一个简单的记录器应该可以验证它。