Улучшение JavaScript setInterval код - PullRequest
Новая
       23

Улучшение JavaScript setInterval код

0 голосов
/ 08 июля 2011

У меня сейчас есть этот кусочек JavaScript, который использует jQuery animate для создания эффекта движения воды. 

var waves = function() {
    (function() {
        var FirstWave = function() {
            this.css = function(p) {
                var s = Math.sin(p*5)
                var x = (960 * 2) - (p * 960) + 10
                var y = s * 5 + 15
                return {backgroundPosition: "-" + x + "px", bottom: "-" + y + "px"}
            } 
        };

        var tidalWave = function() {
            $("#waves-1").animate({path: new FirstWave}, 10999, "linear");
        };

        setInterval(tidalWave, 500);
    })();
};

waves() вызывается внутри обработчика $(document).ready().

Как видите, setInterval установлен на 500, хотя анимация длится чуть менее 11 секунд. Я сделал это, чтобы анимация начиналась при загрузке страницы, так как простой вызов $.animate() не запускал анимацию.

Я уверен, что при таком способе будет много проблем со скоростью, и что угодно еще.

Можно ли это улучшить?

1 Ответ

0 голосов
/ 08 июля 2011

Вы должны использовать setTimeout вместо setInterval (есть различные преимущества, см. Здесь: setTimeout или setInterval? ), и, так как вы хотите, чтобы он повторялся, вы должны просто сделать еще один setTimeout в вашей функции tidalWave, которая вызывает tidalWaveснова сам по себе. 

var tidalWave = function() {
   $("#waves-1").animate({path: new FirstWave}, 10999, "linear");
   setTimeout(tidalWave, 500);
};

setTimeout(tidalWave, 500);

Теперь вы также можете использовать $ (document) .ready вместо начального тайм-аута.

...