JavaScript setInterval將僅運行一次jQuery

Question

我在這里有一個小提琴： http : //jsfiddle.net/justinboyd101/4nrbb/

這是我的問題：

為什么當我的console.log函數和將html添加到div的語句沒有在我的其他循環jQuery函數上運行時，為什么起作用？

有關更多詳細信息，請閱讀以下內容：

我正在嘗試使用setInterval創建一個新聞動態。 該動畫應該從屏幕的右側滑動文本，然后向下推內容，然后重設回其原始位置。 由於某種原因，它將只運行一次動畫。 我設置了一個簡單的函數，在該函數中，interval都會從數組中收集信息並將其添加到空div中。

如果您不想去jsfiddle，這是我的代碼：

的HTML

<div id="newsValueText" class="newsValueText floatLeft darkBlue">
    <ul id="newsTicker" class="newsTicker">
        <li name="tick" ph="tick1">We have in-store technical support.</li>
        <li name="tick" ph="tick2">Option 2</li>
        <li name="tick" ph="tick3">Option 3</li>
        <li name="tick" ph="tick4">Option 4</li>
        <li name="tick" ph="tick5">Option 5</li>
        <li name="tick" ph="tick6">Option 6</li>
    </ul>
</div>
<div id="log"></div>

JS

//Get the ticker elements
var tickText = document.getElementById('newsTicker').getElementsByTagName('li');
var tickNum = tickText.length;
//New Array to clear empty data
var tickArry = [];
//Loop through list items and add non-void data to new loop
for(var a = 0; a < tickNum; a++) {
    if ($(tickText[a]).html() != '') {
        tickArry.push($(tickText[a]));
    }
}
//Loop int
var i = 0;
var log = document.getElementById('log');
//Self-invoking function for ticker animation
function animTick() {
    console.log($(tickArry[i]));
    log.innerHTML += $(tickArry[i]).html();
    //Make current tick item fall down
        $(tickArry[i]).animate({'padding-top' : '+=50px'}, 500,
            function() {
                //Once tick item is off screen, reset values
                $(this).css({'margin-left' : '9999px', 'padding-top' : '0'});
            });
        //Increment item
        i++;
        //If the tick has reach its length then reset
        if (i === tickNum) {
            i = 0;
        //Else call the animation for the next tick
        }
    }
    //Immediately animate in first list item
    $(tickArry[i]).animate({'margin-left' : '0px'}, 2000);
    //Add a delay
    setInterval(animTick, 3000);

Answer 1

如果要遞歸調用同一函數，請使用setTimeout() 。

您的setInterval()替代方法是：

function animTick() {
    // Function definition
}

setInterval(animTick, 3000);

Answer 2

如果包含$(tickArry[i]).animate({'margin-left' : '0px'}, 2000);怎么辦？ 里面你animTick功能？

演示： 小提琴