JavaScript Scopeping Can't Access 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;
}
}