如何停止间隔？答案

【问题标题】：How to stop Interval?如何停止间隔？
【发布时间】：2019-09-08 16:33:39
【问题描述】：

我正在尝试创建一个按钮来停止运行 setInterval 的方法。

我正在使用 clearInterval 来执行此操作，但由于某种原因它不会让我以 setInterval 变量为目标。

class Helpers {
    static start(value: Vehicle): void {
        let begin = setInterval(value.calculateSpeed, 1000, value);
    }
    static stop() {
        let stop = clearInterval(Helpers.begin);
    }
}

我也尝试过使用命名空间，但也没有用。

namespace Extras {
    export function start(value:Vehicle) {
        let begin = setInterval(value.calculateSpeed, 1000, value);
    }
    export function stop() {
        let stop = clearInterval(Extras.begin);
    }
}

start() 方法运行良好……但 stop() 方法没有做任何事情。任何帮助将不胜感激。

非常感谢你们的帮助！你解决了我的问题！

【问题讨论】：

Helpers.begin 是 undefined 因为 begin 是一个局部变量。
let 的作用域是函数，而不是类或实例。我希望像Helpers.begin = setInterval() 这样的东西，但随后用打字稿语法编写（如果不同的话）。
为什么需要这些虚拟类？只需在代码中所属的位置使用setInterval。

标签： javascript typescript function oop methods

【解决方案1】：

您需要引用的变量是静态的。目前，变量 begin 是您的 start 函数的本地变量。此外，您不需要保留clearInterval 返回的值的引用。 begin 的更好名称是 interval 或 intervalId

class Helpers {
    static interval;
    static start(value: Vehicle): void {
        Helpers.interval = setInterval(value.calculateSpeed, 1000, value);
    }
    static stop() {
        clearInterval(Helpers.interval);
    }
}

更新：但是，将intervelId 设为静态并不是一个好主意，因为您可能希望同时在多个地方使用此 Helper 类。将其设为静态将创建变量的单个副本，这可能会导致问题。

更好的方法是这样的：

class Helpers {
    private _intervalId;
    start(value: Vehicle): void {
        this._intervalId = setInterval(value.calculateSpeed, 1000, value);
    }
    stop() {
        clearInterval(this._intervalId);
    }
}

要调用函数，您可以使用一些对象：

const helper:Helpers = new Helpers();
helper.start();

另外，确保helper.start(); 在被同一个对象停止之前不会被多次调用。要正确处理这种边缘情况，您可以检查 start() 中的 _intervalId 的值，如果已经设置则抛出一些错误。如果是stop()，您可以设置this._intervalId = null

【讨论】：

这太恶心了，为什么在没有理由的情况下让一切都静止？只需使用this.interval。

【解决方案2】：

begin 是一个局部变量。如下在 start 外面声明，

class Helpers {

    static begin;
    static start(value: Vehicle): void {
        begin = setInterval(value.calculateSpeed, 1000, value);
    }
    static stop() {
        let stop = clearInterval(Helpers.begin);
    }
}

【讨论】：

【解决方案3】：

class Helpers {
    private _intervalRef;   

    start(): void {
        this._intervalRef = setInterval(function () { console.log('hello') }, 1000);
    }
    stop() {
        clearInterval(this._intervalRef);
    }
}

const helper:Helpers = new Helpers();

helper.start();

helper.stop();

您可以使用上面的代码参考创建相同的内容。

【讨论】：

【解决方案4】：

您可以将begin 和stop 声明为您的类属性，然后执行与现在相同的操作！

【讨论】：

【解决方案5】：

您还需要将begin 间隔设为静态：

class Helpers {
    static begin;

    static start(value: Vehicle): void {
        Helpers.begin= setInterval(value.calculateSpeed, 1000, value);
    }

    static stop() {
        clearInterval(Helpers.begin);
    }
}

【讨论】：