Оптимизировать код JavaScript [повторяется]

Question

Оптимизировать код JavaScript [повторяется]

0

Может ли кто-нибудь помочь мне оптимизировать этот код javascript? Я вижу повторение. Могу ли я избежать повторения?

Благодарю!

var billboardTimer;
var billboardCurrent = 0;
var billboardSize = $('.billboard li').size();
$('.billboard li').on('click', function(){
    clearInterval(billboardTimer);
    $('.billboard li').removeClass('active');
    $(this).addClass('active');
    $('.billboard .img-large').removeClass('current').removeAttr('style');
    $('.billboard .img-large').eq($(this).index()).animate({'opacity': 1}).show();
});
$('.billboard li:first').click();
billboardTimer = setInterval(billboardNext, 2000);
function billboardNext(){
    billboardCurrent++;
    if (billboardCurrent == billboardSize) {billboardCurrent = 0;}
    $('.billboard .img-large').removeClass('current').removeAttr('style');
    $('.billboard .img-large').eq(billboardCurrent).animate({'opacity': 1}).show();
    $('.billboard li').removeClass('active');
    $('.billboard li').eq(billboardCurrent).addClass('active');
}

Ссылка jsfiddle.net

user2119316 04 дек. 2013, в 12:07

Источник

7

codereview.stackexchange.com ?
Sirko 04 дек. 2013, в 11:07
0

Не совсем ответ на ваш вопрос, но если html-структура является статической, я бы поместил $ ('. Billboard li') и $ ('. Billboard .img-large') в переменные, чтобы избежать повторных запросов.
Davy 04 дек. 2013, в 11:29
0

HTML не является статичным.
user2119316 04 дек. 2013, в 11:32

Показать ещё 1 комментарий

Теги:

javascript

jquery

1 ответ

Ещё вопросы

Не совсем ответ на ваш вопрос, но если html-структура является статической, я бы поместил $ ('. Billboard li') и $ ('. Billboard .img-large') в переменные, чтобы избежать повторных запросов.

Skymt · Accepted Answer · 2013-12-04T08-53-00.000Z

Может, что-то вроде этого?

var billboardTimer;
var billboardCurrent = 0;
var billboardSize = $('.billboard li').size();

$('.billboard li').on('click', function(){
    clearInterval(billboardTimer);
    setActive($(this).index());
});
$('.billboard li:first').click();
billboardTimer = setInterval(function() {
    setActive(billboardCurrent = (billboardCurrent + 1) % billboardSize);
}, 2000)
function setActive(index) {
    $('.billboard .current').animate({'opacity': 0}).removeClass('current');;
    $('.billboard .img-large').eq(index).animate({ 'opacity': 1}).addClass('current');
    $('.billboard li').removeClass('active').eq(index).addClass('active');
}

http://jsfiddle.net/9dxcc/2/