Question

尝试制作最简单的图库。有一个按钮可以转动图像<button class = "play-pause">Play</ button>。点击它会启动setInterval，但再次按下时需要停止它。怎么办呢？

我的尝试：

document.querySelector('.play-pause').addEventListener('click', function() {
    if(timer == null) clearInterval(timer);

    this.innerHTML = "Pause";

    timer = setInterval(function() {
        i = (i < images.length - 1) ? ++i : 0;
        img.src = images[i];
    }, 1000);

    timer = null;
});

Answer 1

您正在丢弃停止播放幻灯片所需的变量 - 解决方案。

http://jsfiddle.net/obh5tanL/

不要初始化你的计时器变量。

document.querySelector('.play-pause').addEventListener('click', function() {
    if (timer) {
        clearInterval(timer);
        this.innerHTML = "Play";
    }
    else {
        this.innerHTML = "Pause";

        timer = setInterval(function() {
            i = (i < images.length - 1) ? ++i : 0;
            img.src = images[i];
        }, 1000);
    }

});

Answer 2

问题是clearInterval将interval对象作为参数，并清除它。您将timer设置为空，因此您要求其清除null，这意味着它不会做任何事情。

WindowTimer.clearInterval - MDN

您需要使用其他变量来检查播放/暂停按钮的状态。

document.querySelector('.play-pause').addEventListener('click', function() {

if(playing === true) {
    this.innerHTML = 'Play';
    clearInterval(timer);
    playing = false;
    return;
}

this.innerHTML = "Pause";

timer = setInterval(function() {
    i = (i < images.length - 1) ? ++i : 0;
    img.src = images[i];
}, 1000);

playing = true;

}）;

http://jsfiddle.net/eL31q3eq/2/

无法停止滑块

2 个答案: