不能停止滑塊

試圖使最簡單的畫廊。有一個按鈕可以打開圖像<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

不能停止滑塊

回答

相關問題