javascriptスライダーsettimeoutの問題

Question

私は現在、建築家のための小さなウェブサイトを開発しています。 私の目標は、できるだけシンプルにすることです。

したがって、サイトを1ページのサイトとして作成しました。再ロードせずに、PHPを使用せずに、さまざまなサブページをブラウズすることができます。ちょうどHTML5とCSS3。

しかし、クライアントはプロジェクトをスライド可能にしたいと考えています。 幸いにも私はw3（https://www.w3schools.com/howto/howto_js_slideshow.asp）の適切なスライダーを見つけました

私は前と次のボタン、自動スライドとバニラJSを使用して見つけることができたのは一番簡単でした。 スライダを使用してプロジェクトを参照できます。 コンテンツはフォアグラウンドでリッテスペースを使用するだけで、プロジェクトの画像はウェブサイトの背景全体を置き換えます。 しかし、私は夢中になっているsetTimeoutを使用しています。

ユーザーが次のまたは前のボタンを押していない限り、すべてが完璧に機能します。スライドショーが狂っています。 （確かに、この問題はかなり一般的で、stackoverflowにはいくつかのスレッドがありますが、私のプロジェクトには適切な答えが見つかりませんでした！）

私はいくつかのことを試みましたが、 JavaScript。

<script> 
"use strict"; 
var slideIndex = 1; 
showDivs(slideIndex); 

function plusDivs(n) { 
showDivs(slideIndex += n); 
} 

function showDivs(n) { 
var i; 
var x = document.getElementsByClassName("mySlides"); 
    if (n==undefined){n = ++slideIndex;} 
if (n > x.length) {slideIndex = 1;} 
if (n < 1) {slideIndex = x.length;} 
for (i = 0; i < x.length; i++) { 
    x[i].style.display = "none"; 
} 
x[slideIndex-1].style.display = "block"; 
setTimeout(showDivs, 8000); // Change image every 8 seconds 
} 
</script> 

これは現在使用しているコードです。 各スライドの後にタイマーをリセットする方法はありますか？ clearTimeoutについて読んだことがありますが、正常に動作しませんでした。

何か助けていただければ幸いです。みんなありがとう。

Answer 1

あなたは、あなたがclearTimeout` `に使用できる時間のIDを返しますsetTimeout` showDivs

<script> 
"use strict"; 
var slideIndex = 1; 
var timeOutId; 
showDivs(slideIndex); 

function plusDivs(n) { 
    showDivs(slideIndex += n); 
} 

function showDivs(n) { 
    // Stop the timeout from triggering. 
    clearTimeout(timeOutId); 

    var i; 
    var x = document.getElementsByClassName("mySlides"); 
    if (n==undefined){n = ++slideIndex;} 
    if (n > x.length) {slideIndex = 1;} 
    if (n < 1) {slideIndex = x.length;} 
    for (i = 0; i < x.length; i++) { 
     x[i].style.display = "none"; 
    } 
    x[slideIndex-1].style.display = "block"; 
    // Schedule a new timeout. 
    timeOutId = setTimeout(showDivs, 8000); // Change image every 8 seconds 
} 

Answer 2

ああ、タイムアウトを変数に保存してキャンセルできるように、コードを変更する必要があります。

var timer; 
function showDivs (n) { 
    /* the code */ 
    if (timer) clearTimeout(timer) 
    timer = setTimeout(showDivs, 8000); 
}