Jquery komut dosyası ile setInterval ()

Bu senaryoda bana şu ana kadar yardımcı olanlara hızlı bir teşekkür, JavaScript ve jquery'nin daha zarif yönlerinden bazılarını öğrenmekte bana çok yardımcı oldunuz.

Bu senaryoda son bir sorunum var, bir görüntü değiştirici arasında geçiş yapmak için setinterval() kullanıyorum, JS/Jquerycode şöyle:

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

Sahip olduğum sorun, bir kullanıcı manuel olarak bir bağlantıya tıkladığında setInterval() 'ı yeniden başlatmak.

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.

Bir kullanıcının döngünün sonuna doğru bir bağlantıyı tıklatıp hemen bir sonraki görüntüye geçmesini önlemek için zamanlayıcıyı nasıl yeniden ayarlayabileceğimi bulmaya çalışıyorum.

Kendi geri çağırma işlevimi oluşturmayı, switchToImg() konumunda oluşturmaya çalıştım, böylece işlev zamanlayıcı sıfırlandıktan sonra, ideal olarak bunun başlangıçta daha uzun bir süre olmasını istiyorum (örneğin 30 saniye) ama sonra 15 saniyeye geri çekil. Bununla birlikte araştırmam, başımı ya da kuyruğunu almakta zorlandığım bir çok farklı depoya yol açtı.

Bu işlevselliği senaryo içerisinde nasıl oluşturabileceğime dair herhangi bir rehberlik gerçekten iyi bir şekilde gerçekleştirilebilir. Zaman ayırdığınız için teşekkürler. :)

1
Yan nota olarak: parseInt ($ ('# aa-active' özelliğini bağla) - attr ('class'). Maç (/ [0-9] /)) + parseInt (1) , parseInt ($ ('# aa-active' özelliğinin bağlanma-özelliği '). attr (' sınıf '). eşleşmeli (/ [0-9] /), 10) +1 olmalıdır. ayrıştırma , sayı tabanı (taban), 2. parametre olarak (bu durumda 10 ) , isteğe bağlıdır, ancak önerilir . Ayrıca parseInt (1) tamamen yararsızdır.
katma yazar Rocket Hazmat, kaynak
Çoğu , yarıçapı unutursanız tarayıcılar doğru değeri döndürür, ancak her zaman emin olamazsınız. :-)
katma yazar Rocket Hazmat, kaynak
Teşekkürler Roket, birisinin bu sayı kodunu değerlendireceğini umuyordum, sayı tabanı hakkında çok faydalı olduğunu bilerek, teşekkür ederim. Kodumu değiştireceğim. +1
katma yazar David Barker, kaynak

2 cevap

Ne istediğinizi takip ettiğimden% 100 emin değilim, ancak yapmaya çalıştığınız şey, kullanıcı tıkladıktan sonra bir gecikmeden sonra aralık sayacını yeniden başlatmaksa, aşağıdaki gibi yapabilirsiniz:

$('#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 saniyelik bir gecikmeden sonra aralık sayacını yeniden başlatmak için bir kerelik setTimeout() çağrısı kullanıyor olacaksınız. Bu, bir tıklamanın ardından bir sonraki görüntünün tekrar değiştirilmesinden önce 15 + 15 = 30 saniye ve daha sonra her seferinde 15 saniye verir.

2
katma
Ne istediğimi% 100 bilmeden, kafasındaki tırnağa çarptın. Teşekkürler, bu işe yarıyor!
katma yazar David Barker, kaynak

Soruyu doğru anladığımdan emin değilim. Ama temelde, kullanıcı tıkladıktan sonra zamanlayıcının olmasını engellemek istediğinizi anlıyorum. SwitchToImg tam olarak yaptıktan hemen sonra setInterval'i çağırmamalı mı? SwitchToImg 'i daha sonra her 15 saniyede bir kullanıcının tıklanmasından sonra arayacaktır.

0
katma