質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.10%

setTimeout 最後の処理のdelay(時間)が遅い。

受付中

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 501

score 8

スライドを作ろうとしていたのですが、最後の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);

});
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

-1

繰り返しなら、
setIntervalを使いましょう。

let timerId = setInterval(nextact, 2000);

無理にsetTimeoutを使おうとして、最後の処理遅延が、二重で行われてしまったりなどの弊害が起きているのかと。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/05/06 09:32 編集

    ご返答ありがとうございます。

    setIntervalを最初使っていたのですが全く同じでした。
    色々調べたところ下記の記事をみつけて、再帰的なsetTimeoutを使用することにしました。

    https://ja.javascript.info/settimeout-setinterval

    キャンセル

  • 2020/05/06 11:06

    すみません。

    自己解決しました。

    ありがとうございました。

    キャンセル

  • 2020/05/07 08:43

    > setIntervalを最初使っていたのですが全く同じでした。

    そういう、質問文に書かれない背景情報は重要になることがあるので、
    次質問される時は、事前情報として書きましょう。
    第三者は知り得ないので。
    (でないと回答無駄打ちが発生しやすくなる)

    キャンセル

-1

分岐(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');
    } 
    }
  };

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.10%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る