JavaScript 作用域无法访问 setInterval

Question

嘿伙计们，有人可以快点帮助我吗。

我在一个函数中有一个幻灯片放映间隔，我想在不使用全局范围的情况下从另一个函数中清除它，因为我知道这是不好的做法。

有人可以帮忙吗？

function beginSlideshow() {
    var interval = setInterval(function () {
      //Slideshow content here
}

function revertSlideshow() {
    clearInterval(interval);
}

Answer 1

您必须将计时器句柄存储在某处。 :-)

你有很多选择:

模块

您可以使用模块。然后 interval 的顶级声明将不是全局的，它只能被模块访问:

let interval = 0;
export function beginSlideshow() {
    interval = setInterval(function () {
        //Slideshow content here
    }, someValue);
}

export function revertSlideshow() {
    clearInterval(interval);
    interval = 0;
}

在闭包的范围内

与上述模块类似的概念，但不使用模块:

const { beginSlideshow, revertSlideshow } = (() => {
    let interval = 0;
    function beginSlideshow() {
        interval = setInterval(function () {
            //Slideshow content here
        }, someValue);
    }

    function revertSlideshow() {
        clearInterval(interval);
        interval = 0;
    }

    return { beginSlideshow, revertSlideshow };
})());

在调用者的范围内

您可以通过返回停止它的函数来解决调用 beginSlideshow 的人的问题:

function beginSlideshow() {
    const interval = setInterval(function () {
        //Slideshow content here
    }, someValue);
    return () => {
        clearInterval(interval);
    };
}

调用者会像这样使用它:

const revertSlideshow = beginSlideShow();
// ...
revertSlideshow();

另一种将其存储在调用者范围内的方法是将其包装在一个类中，并将句柄作为数据属性:

class Slideshow {
    interval = 0;

    begin() {
        this.interval = setInterval(/*...*/);
    }

    revert() { // I'd call it "end"
        clearInterval(this.interval);
        this.interval = 0;
    }
}