Q&A
ご返答ありがとうございます。
setIntervalを最初使っていたのですが全く同じでした。
色々調べたところ下記の記事をみつけて、再帰的なsetTimeoutを使用することにしました。
https://ja.javascript.info/settimeout-setinterval
スライドを作ろうとしていたのですが、最後のdiv.boxから最初のdiv.boxに戻る動作が遅いです。(2000より掛っている。)
これはなぜでしょうか？
html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>zengamen</title> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="style.css"> <script src="base.js" defer></script> </head> <body> <div id="slide"> <div class="box active"> </div> <div class="box"> </div> <div class="box"> </div> </div> </body> </html>
css
@charset 'utf-8'; .box{ width: 100vw; height: 100vh; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } .box:nth-child(1){ background-color: blueviolet; } .box:nth-child(2){ background-color:red; } .box:nth-child(3){ background-color:violet; } div.active{ z-index: 2; }
js
document.addEventListener('DOMContentLoaded', function () { let b = document.querySelector('.active'); let child = document.querySelectorAll('.box'); let i = 0; let leg = child.length-1; console.log(leg); let nextact = function () { if(i <= leg){ child[i].classList.remove('active'); i++ if(i < leg){ child[i].classList.add('active'); } } else{ i = 0; child[i].classList.add('active'); } }; let pretact = function () { child[i].classList.remove('active'); i-- child[i].classList.add('active') }; let timerId = setTimeout(function tick() { nextact(); timerId = setTimeout(tick, 2000); }, 2000); });
回答2件
0
分岐(if)する所を間違えていました。
投稿当初のjs
let nextact = function () { if(i <= leg){ child[i].classList.remove('active'); //i = 1 i++ //i = 2 加算 if(i < leg){ //i = 2 なので false child[i].classList.add('active'); } falseなのでifの頭に戻る。 この時にactiveクラスがついてなく2000待たされる為に遅れる。 } else{ i = 0; child[i].classList.add('active'); } };
修正版
let nextact = function () { if(i <= leg){ child[i].classList.remove('active'); i++ if(i <= leg){ child[i].classList.add('active'); } else{ i = 0; child[i].classList.add('active'); } } };
投稿2020/05/06 02:20
総合スコア12
0
繰り返しなら、
setIntervalを使いましょう。
javascript
1let timerId = setInterval(nextact, 2000);
無理にsetTimeoutを使おうとして、最後の処理遅延が、二重で行われてしまったりなどの弊害が起きているのかと。
投稿2020/05/05 14:38
総合スコア9528
すみません。
自己解決しました。
ありがとうございました。
> setIntervalを最初使っていたのですが全く同じでした。
そういう、質問文に書かれない背景情報は重要になることがあるので、
次質問される時は、事前情報として書きましょう。
第三者は知り得ないので。
（でないと回答無駄打ちが発生しやすくなる）
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。