setInterval () met JQuery-script

Bedankt degenen die me tot nu toe hebben geholpen met dit script, jullie hebben me enorm geholpen bij het leren van enkele van de meer elegante kanten van JavaScript en jQuery.

Ik heb nog een laatste probleem met dit script, ik gebruik setinterval() om door een afbeeldingswisselaar te bladeren, de JS/Jquerycode is als volgt:

$(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().

Het probleem dat ik heb is met setInterval() opnieuw initialiseren zodra een gebruiker handmatig op een link heeft geklikt.

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.

Ik probeer uit te zoeken hoe ik de timer opnieuw kan instellen om te voorkomen dat een gebruiker tegen het einde van de cyclus op een link klikt en onmiddellijk naar de volgende afbeelding schakelt.

Ik heb onderzoek gedaan naar het bouwen van mijn eigen callback-functie in switchToImg() zodat zodra de functie is voltooid, de timer opnieuw wordt ingesteld, idealiter zou ik willen dat dit aanvankelijk een langere tijd is (bijvoorbeeld 30 seconden) maar ga dan terug naar de 15 seconden klok. Mijn onderzoek heeft me echter geleid tot een hele reeks verschillende repositories waar ik moeite mee heb om hoofd of staart te maken.

Elke begeleiding over hoe ik deze functionaliteit in het script kan bouwen zou echt appreacited zijn. Bedankt voor je tijd. :)

 1
toegevoegd David Barker
Bekeken: 49
de bron
Als een kanttekening: parseInt ($ ('# feature-linkt aa-active'). Attr ('class'). Match (/ [0-9] /)) + parseInt (1) moet parseInt zijn ($ ('# feature-linkt aa-active'). attr ('class'). match (/ [0-9] /), 10) +1 . parseInt neemt de radix (basis) van het getal (in dit geval 10 ) als een 2e parameter , het is optioneel, maar aanbevolen . Ook is parseInt (1) volledig nutteloos.
toegevoegd de auteur Rocket Hazmat, de bron
De meeste browsers zullen de juiste waarde teruggeven als je de radix vergeet, maar je weet het niet altijd zeker. :-)
toegevoegd de auteur Rocket Hazmat, de bron
Bedankt Rocket, ik hoopte dat iemand dat stukje code zou evalueren, wetende dat het over de radix erg handig is, dank je. Ik zal mijn code aanpassen. 1
toegevoegd de auteur David Barker, de bron

2 antwoord

Ik ben niet 100% zeker dat ik volg wat je vraagt, maar als wat je probeert te doen is om de intervaltimer te herstarten na een vertraging nadat de gebruiker klikt, dan zou je dat als volgt kunnen doen:

$('#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);
    }
});

U zou een one-shot setTimeout() -oproep gebruiken om de intervaltimer opnieuw op te starten na een vertraging van 15 seconden. Dit zou je 15 + 15 = 30 seconden geven voordat het volgende beeld na een klik opnieuw wordt geschakeld en vervolgens elke keer 15 seconden.

2
toegevoegd
de bron
Nou, zonder 100% te weten wat ik vroeg, sla je de spijker op zijn kop. Bedankt, dit werkt!
toegevoegd de auteur David Barker, de bron

Ik weet niet zeker of ik de vraag goed begrijp. Maar eigenlijk snap ik dat je wilt voorkomen dat de timer gebeurt nadat de gebruiker klikt. Zou het niet nodig moeten zijn om setInterval direct na switchToImg aan te roepen? Het zal switchToImg dan na elke 15 seconden vanaf de klik van de gebruiker aanroepen.

0
toegevoegd
de bron