javascript слайд-шоу растут быстрее, почему? - PullRequest
Новая
       11

javascript слайд-шоу растут быстрее, почему?

1 голос
/ 12 августа 2011

У меня есть слайд-шоу на моей домашней странице.Он состоит из 2 изображений.

Я предварительно загружаю эти 2 изображения, делая new Image() и устанавливая для них .src.

У меня есть функция giveNextName, которая возвращает имя следующего изображения(это должно быть в атрибуте src элемента img) (я делаю это, потому что скоро слайд-шоу будет состоять из более чем 2 изображений)

Таким образом, основной код выглядит так: 

BillBoard               = {};
BillBoard.folder        = "/pictures/cards/";
BillBoard.ext           = "png";
BillBoard.$             = $("#billboard img");
BillBoard.pics          = 2;
BillBoard.changeTime    = 7000;
BillBoard.names         = ["ad1","ad2"];
BillBoard.currentState  = 0;       
BillBoard.images        = // array of preloaded Images

(function(){
    var image, images = [];
    for (var i=0; i<BillBoard.pics; i++) {
        image = new Image ();
        image.src = BillBoard.folder+BillBoard.names[i]+'.'+BillBoard.ext;
        images.push (image);
    }
    return images;
}());

BillBoard.giveNextName = function(){/* getting the next name */};

// BillBoard change action
BillBoard.change = function(){
    BillBoard.$.fadeOut(function(){
        $(this).attr('src', BillBoard.giveNextName());
        $(this).fadeIn();
    });
}

// Starting BillBoard
window.setInterval(BillBoard.change, BillBoard.changeTime);

Итак, идея проста.с window.setInterval я звоню BillBoard.change каждые n секунд.Но я не знаю почему, рекламный щит становится все быстрее и быстрее, пока изображение не будет совсем (fadeIn не успевает выполнить)

Где моя ошибка?

UPD .Спасибо Янну Рамину за ссылку.

Я не должен звонить BillBoard.change каждые n секунд через window.setInterval.Вместо этого я должен добавить вызов BillBoard.change в обратный вызов fadeOut().

Я имею в виду этот код: 

BillBoard.change = function(){
    BillBoard.$.fadeOut(function(){
        $(this).attr('src', BillBoard.giveNextName());
        $(this).fadeIn();
        window.setTimeout(BillBoard.change, BillBoard.changeTime);
    });
}

// simply call the change function
// it will be calling itself every n seconds
BillBoard.start = (function(){
    window.setTimeout(BillBoard.change, BillBoard.changeTime);
}());

1 Ответ

3 голосов
/ 12 августа 2011

Смотрите это для вероятного виновника:

http://www.ozonesolutions.com/programming/2011/07/jquery-fadein-window-setinterval-a-bad-combination/

...