jqueryのスライドショーがどんどん早くなります

Question

前提・実現したいこと

課題で、jqueryを使ってスライドショーを作っています。
スライドショーは完成したのですが、スライドの間隔がどんどん早くなります。
更新すると元のペースに戻るのですが、開いたまま放置しているとペースが短くなっていくのです。
3秒ごとに切り替わるようにしたいのですが……
「jquery スライドショー　早くなる」「jquery　スライドショー　自作」などのキーワードで検索してみたのですが、プラグインの説明のページがヒットしてしまいます。
どこか文法がおかしいのかと思い確認してみたのですが、どうにも解決しません。
ご教示お願い致します。

該当のソースコード

<div class="news">
    <img src="images/page1_03.gif" alt="" class="page1">
    <ul>
        <li class="newspage">
            <div class="page cf">
                <img src="images/menu2img1_08.gif" alt="" class="newsimg">
                <div class="news-right">
                    <img src="images/news_08.gif" alt="">
                    <h2>お知らせタイトルお知らせタイトル</h2>
                    <p>お知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせ</p>
                </div><!--news-right-->
                <div class="indexmark">
                    <img src="images/menu2index_13.gif" alt="">
                </div>
            </div>
            <div class="page cf page-2">
                <img src="images/menu2img2_14.gif" alt="" class="newsimg">
                <div class="news-right">
                    <img src="images/news_08.gif" alt="">
                    <h2>お知らせタイトルお知らせタイトル</h2>
                    <p>お知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせ</p>
                </div><!--news-right-->
                <div class="indexmark">
                    <img src="images/menu2index_13.gif" alt="">
                </div>
            </div>
            <div class="cf page-3">
                <img src="images/menu2img3_16.gif" alt="" class="newsimg">
                <div class="news-right">
                    <img src="images/news_08.gif" alt="">
                    <h2>お知らせタイトルお知らせタイトル</h2>
                    <p>お知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせ</p>
                </div><!--news-right-->
                <div class="indexmark">
                    <img src="images/menu2index_13.gif" alt="">
                </div>
            </div>
        </li>
        <li class="newspage">
            <div class="page cf">
                <img src="images/menu2img1_08.gif" alt="" class="newsimg">
                <div class="news-right">
                    <img src="images/news_08.gif" alt="">
                    <h2>お知らせタイトルお知らせタイトル</h2>
                    <p>お知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせ</p>
                </div><!--news-right-->
                <div class="indexmark">
                    <img src="images/menu2index_13.gif" alt="">
                </div>
            </div>
            <div class="page cf page-2">
                <img src="images/menu2img2_14.gif" alt="" class="newsimg">
                <div class="news-right news-right2">
                    <img src="images/news_08.gif" alt="">
                    <h2>お知らせタイトルお知らせタイトル</h2>
                    <p>お知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせ</p>
                </div><!--news-right-->
                <div class="indexmark">
                    <img src="images/menu2index_13.gif" alt="">
                </div>
            </div>
            <div class="cf page-3">
                <img src="images/menu2img3_16.gif" alt="" class="newsimg">
                <div class="news-right news-right3">
                    <img src="images/news_08.gif" alt="">
                    <h2>お知らせタイトルお知らせタイトル</h2>
                    <p>お知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせ</p>
                </div><!--news-right-->
                <div class="indexmark">
                    <img src="images/menu2index_13.gif" alt="">
                </div>
            </div>
        </li>
        <li class="newspage">
            <div class="page cf">
                <img src="images/menu2img1_08.gif" alt="" class="newsimg">
                <div class="news-right">
                    <img src="images/news_08.gif" alt="">
                    <h2>お知らせタイトルお知らせタイトル</h2>
                    <p>お知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせ</p>
                </div><!--news-right-->
                <div class="indexmark">
                    <img src="images/menu2index_13.gif" alt="">
                </div>
            </div>
            <div class="page cf page-2">
                <img src="images/menu2img2_14.gif" alt="" class="newsimg">
                <div class="news-right news-right2">
                    <img src="images/news_08.gif" alt="">
                    <h2>お知らせタイトルお知らせタイトル</h2>
                    <p>お知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせ</p>
                </div><!--news-right-->
                <div class="indexmark">
                    <img src="images/menu2index_13.gif" alt="">
                </div>
            </div>
            <div class="cf page-3">
                <img src="images/menu2img3_16.gif" alt="" class="newsimg">
                <div class="news-right news-right3">
                    <img src="images/news_08.gif" alt="">
                    <h2>お知らせタイトルお知らせタイトル</h2>
                    <p>お知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせ</p>
                </div><!--news-right-->
                <div class="indexmark">
                    <img src="images/menu2index_13.gif" alt="">
                </div>
            </div>
        </li>
    </ul>
    <img src="images/page2_05.gif" alt="" class="page2">
</div><!--news-->

/* ページ全体 */
.cf:after{
    content: "";
    display: block;
    clear: both;
}

/* news */
.news{
    width: 960px;
    height: 340px;
    margin: 20px auto;
    border-radius:10px;
    border: 2px solid orange;
    position: relative;
}

/* ボタンになるオレンジ矢印 */
.page1{
    position: absolute;
    top: 20px;
    z-index: 2;
}

.page2{
    position: absolute;
    left: 931px;
    top: 20px;
}

/* newsの中身、動く部分 */
.news ul{
    margin: 20px 48px;
}

/* 動く部分の内訳 */
.newspage{
    height: 300px;
    margin-top: 12px;
    padding-right: 20px;
    padding-left: 20px;
    /* background-color: pink; */
}

/* 上部 */
.page{
    border-bottom: 1px solid orange;
    padding-bottom: 10px;
    display: flex;
}

.newsimg{
    float: left;
}

/* 上部の文章コンテンツ部分 */
.news-right{
    padding-left: 23px;
    padding-right: 65px;
    width: 525px;
}

.news-right img{
    float: left;
}

.news-right h2{
    line-height: 40px;
    padding-left: 125px;
    font-size: 15px;
}

.news-right p{
    font-size: 13px;
    padding-top: 18px;
}

/* 上部のインデックスマーク */


/* 動く部分　真ん中 */
.page-2{
    padding-top: 8px;
    display: flex;
}

/* 真ん中のインデックスマーク */
.indexmark{
    width: 30px;
    height: 30px;
    padding-top: 35px;
    padding-right: 44px;
}

/* 動く部分　下 */
.page-3{
    padding-top: 8px;
    display: flex;
}

/* 下 のインデックスマーク */
.indexmark3{
    position: absolute;
    top:260px;
    right: 90px;
}


/* js用css */
.news{
    position: relative;
    overflow: hidden;
}

.news ul{
    position: absolute;
    width: 3000px;
}

.news li{
    float: left;
    width: 870px;
    /* border:1px solid blue; */
}

$(function(){
    // スライドショー(自動)
    // 定義
        // スクロール方向
        var dir = -1;

        // スクロールのインターバル
        var interval = 3000;

        // スクロールのスピード
        var duration = 1500;

        // タイマー用の変数
        var timer;

    // リストの順番を変更
    $(".news ul").prepend($(".news li:last-child"));

    // リストの配置を変更
    $(".news ul").css("left", -930);

    // 3000ミリ秒ごと(変数interval)にslideTimer関数を実行
    timer = setInterval(slideTimer,interval);

    // slideTimer関数を指定
    function slideTimer(){
        // スクロール方向の判断
        if (dir==-1){
            // 画像一枚ぶん左へスクロール
            $(".news ul").animate({"left":"-=910px"}, duration,
            function(){
                // スクロールしたらリストの順番を変更(ループで)
                $(this).append($(".news li:first-child"));
    
                // スクロールしたらリストの配置を変更
                $(this).css("left", -930);
            });

        }else{
           // 画像一枚ぶん右へスクロール
           $(".news ul").animate({"left":"+=910px"}, duration,
           function(){
               // スクロールしたらリストの順番を変更(ループで)
               $(this).append($(".news li:last-child"));
   
               // スクロールしたらリストの配置を変更
               $(this).css("left", -930);

               dir =-1;
           }); 
        }

    }
    // ここまでスライドショー(自動)

    // スライドショー(ボタンによる手動)
    $(".page1").click(function(){
        // スクロール方向の切り替え(右)
        dir=1;

        // タイマーを一時停止して再スタート
        clearInterval(timer);
        timer=setInterval(slideTimer,interval);

        // タイマーが一時停止してから初回の関数実行
        slideTimer();
    });
    $(".page2").click(function(){
        // スクロール方向の切り替え(左)
        dir=-1;

        // タイマーを一時停止して再スタート
        clearInterval(timer);
        timer=setInterval(slideTimer,interval);

        // タイマーが一時停止してから初回の関数実行
        slideTimer();

    });



});

Answer 1

こちらで回答を得て試したのは下記

• 別パソコンでテストする
• 回答で得たコードを書き足す

改善が見られなかったためslickを使ってスライドショーを作る
スライドショーの間隔が早くなる問題は解決。

Answer 2

    // 3000ミリ秒ごと(変数interval)にslideTimer関数を実行
    timer = setInterval(slideTimer,interval);

↓

    // 3000ミリ秒ごと(変数interval)にslideTimer関数を実行
    if(timer){clearInterval(timer);}
    timer = setInterval(slideTimer,interval);

これで治るなら複数回関数が実行されてるってことだろうけど
何が原因で複数回実行されてるのかは突き止めておきたいところ

Comments

[yambejp]

if(time)→if(timer)ですね
clearIntevalは別にtimerをチェックしなくても害はないので
ifしなくてもいいかも

[KazuhiroHatano]

ご指摘ありがとうございます、修正しました

[miduki]

ご教示ありがとうございます。今課題の入ったパソコンが使えないので、後日試します。
取り急ぎお礼まで。

[miduki]

本日試してみました。別タブを開いてから該当ページに戻ってくると、やはりスライドの間隔がどんどん早くなってしまいます。別パソコンにデータを移してもみましたが、同じ結果でした。
解決策を考えて頂いたのに申し訳ないですが、最初から作り直そうと思います。
ご教示ありがとうございました。

Answer 3

なんとも言えませんがテストした感じだと3秒ごとに回っていますよ

Comments

[yambejp]

まず
var pre=null
を宣言しておいて

function slideTimer(){ ・・・の中に
var t=Date.now();
console.log([pre,t,t-pre]);
pre=t;
と書いてみてください
だいたい安定的に動いていることがわかると思います

[miduki]

ご教示ありがとうございます。
書いてみました。
やはり自分の画面だと、時間を置くと3秒ペースが1秒ペースになってしまいます。
ほかのpcにデータを移して再度テストしてみます。
ありがとうございました。