JQueryスクリプトによるsetInterval()

今までこのスクリプトで私を助けてくれた人に素早く感謝してくれました.Javascriptとjqueryのよりエレガントな面を学ぶのに大いに役立っています。

私はこのスクリプトに最後の問題が1つあります。setinterval()を使用して画像チェンジャーを循環させていますが、JS/Jquerycodeは次のようになります。

$(function() {
var rotateTimer = setInterval(rotateImg,15000);

$('#feature-links a').click(function() {
    if (!$(this).hasClass('a-active')) {
        clearInterval(rotateTimer);
        switchToImg($(this).attr('class'));

    }
});

function switchToImg(image) {
    var $featureImage = $('#feature-image');        
    $featureImage.fadeOut(200, function() {
        $featureImage.css('background-image', 'url(images/main_' + image + '.jpg)').fadeIn(200);
        $('#feature-detail div').removeClass('d-active').filter('.d' + image).addClass('d-active');
    });
    $('#feature-links a').removeClass('a-active').filter('.' + image).addClass('a-active');
};

function rotateImg() {
    var next = 'a' + (parseInt($('#feature-links a.a-active').attr('class').match(/[0-9]/))+parseInt(1));

    if (!$('#feature-links a').hasClass(next))
        next = 'a1';
    switchToImg(next);
}
});

This script works on class names of tags that allow a user to manually switch to an image. As well as this, rotateImg() is providing an automated image/text cycle every 15 seconds with the help of setInterval().

私が持っている問題は、ユーザーがリンクを手動でクリックすると、 setInterval()を再初期化することです。

In the .click function I clear the interval timer and then make a call to the switchToImg() function with the class name of the tag that was clicked on passed as a variable.

私は、サイクルの終わりに向かってリンクをクリックしてすぐに次の画像に切り替えることを避けるために、タイマーをどのように再設定できるかを試しています。

私は自分のコールバック関数を switchToImg()に構築して、関数が完了したらタイマをリセットして、理想的には最初は長時間(例えば30秒)その後、15秒のクロックに戻って落ち着きます。私の研究は、私が頭や尾を作るのが難しいさまざまなリポジトリのロードにつながっています。

スクリプトにこの機能をどのように組み込むことができるかについてのガイダンスは本当に手に入るだろう。御時間ありがとうございます。 :)

1
parseInt(1) >は、 parseInt($( '#feature-links aa-active')、attr( 'class')一致(/ [0-9] /)、10)+1 でなければなりません。 parseInt は、 10 )の "http://en.wikipedia.org/wiki/Radix" rel = "nofollow noreferrer">基数オプションですが、おすすめしてください。また、 parseInt(1)はまったく役に立たない。
追加された 著者 Rocket Hazmat,
基数を忘れた場合、ほとんどのブラウザは正しい値を返しますが、必ずしもそうであるとは限りません。 :-)
追加された 著者 Rocket Hazmat,
ありがとう、ロケット、私は誰かがコードのビットを評価することを望んでいた、基数については非常に有用であることを知って、ありがとう。私は自分のコードを好きになるだろう。 +1
追加された 著者 David Barker,

2 答え

私はあなたが求めていることに従うことを100%確信しているわけではありませんが、あなたがやろうとしているのは、ユーザーがクリックした後にインターバルタイマーを再起動することです。

$('#feature-links a').click(function() {
    if (!$(this).hasClass('a-active')) {
        clearInterval(rotateTimer);
        switchToImg($(this).attr('class'));
        setTimeout(function() {
            rotateTimer = setInterval(rotateImg, 15*1000);
        }, 15*1000);
    }
});

間隔のタイマーを15秒後に再起動するには、ワンショット setTimeout()呼び出しを使用します。これは、15 + 15 = 30秒後に次の画像がクリックされた後に切り替わり、その後は毎回15秒間表示されます。

2
追加された
私が求めていたことを100%も知らなくても、あなたは頭の爪に当たった。ありがとう、これは動作します!
追加された 著者 David Barker,

私は質問を正しく理解しているかわからない。しかし、基本的には、ユーザーがクリックした後にタイマーが発生しないようにしたいと思っています。 switchToImgの直後にsetIntervalを呼び出してはいけませんか?それは、ユーザーのクリックから15秒ごとにswitchToImgを呼び出します。

0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript