不能停止滑块

试图使最简单的画廊。有一个按钮可以打开图像<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; 
});

来源

2015-03-31 Aleksandr

可能重复[如何停止间隔功能（http://stackoverflow.com/questions/21311662/how-to-stop-interval-function） – s3lph 2015-03-31 21:58:17

的问题是，clearInterval采取间隔对象作为参数，并清除它。您将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/

来源

2015-03-31 22:03:01 Aweary

东西我不明白你的决定。 http://jsfiddle.net/obh5tanL/1/ – Aleksandr 2015-03-31 22:16:12

嘿亚历山大，似乎为我工作。无论哪种方式，我更新我的代码，以更贴近地反映你的风格，并添加了一个工作jsFiddle – Aweary 2015-03-31 22:19:22

在您的文章老小提琴，在我的文章。 – Aleksandr 2015-03-31 22:23:02

你丢弃的变量，你需要停止播放幻灯片 - 在这里解决。

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); 
    } 

});

来源

2015-03-31 22:03:07 Amot

不能停止滑块

回答

相关问题