的JavaScript的setInterval將只運行一次的jQuery

我這裏有一個小提琴：http://jsfiddle.net/justinboyd101/4nrbb/的JavaScript的setInterval將只運行一次的jQuery

這裏是我的問題：

爲什麼我的console.log功能，我的發言中添加HTML到一個div的工作，而它的沒有運行在我的其他循環jQuery函數？

有關詳細信息，請閱讀以下：

我試圖創建一個使用setInterval的一個新聞股票。動畫應該從屏幕右側滑動文本，然後將內容向下推，然後重置回原始位置。出於某種原因，它只會運行一次動畫。我設置了一個簡單的函數，其間隔將從數組中收集信息並將其添加到空白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>

//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);

來源

2012-10-22 Dandy

如果你包括$（tickArry [1]）動畫（{ '緣左'： '0像素'}，2000）。在你的animTick裏面？演示：http://jsfiddle.net/4nrbb/2/ –

面對面......動畫在循環之外！我一直在看這個東西太久了！感謝您看到我明顯錯過的內容！ – Dandy

沒問題。我是否將此評論複製爲答案？ –

如果包括$(tickArry[i]).animate({'margin-left' : '0px'}, 2000);您animTick功能裏面有什麼？

演示：Fiddle

來源

2012-10-22 20:11:38

使用setTimeout()如果你是遞歸調用相同的功能。

你setInterval()替代方法是：

function animTick() { 
    // Function definition 
} 

setInterval(animTick, 3000);

來源

2012-10-22 19:58:32

這會在內存上更好嗎？我認爲這個函數會更有意義，因爲它是一個循環。 – Dandy

@JustinBoyd都不會更有效率。 –

的JavaScript的setInterval將只運行一次的jQuery

回答

相關問題