在setInterval的幾分鐘後文本開始閃爍javascript

我正在使用setInterval函數幫助每隔10秒更改一次文本。它工作得很好，但5-6分鐘後，它開始以毫秒爲單位改變它的文本，所以它看起來像閃爍。在setInterval的幾分鐘後文本開始閃爍javascript

我的代碼是：

var wordArray = ["TEXT1","TEXT2","TEXT3"]; 

function typingEffect() { 
    var rand = Math.floor(Math.random()*3); 
    $("#big-bob h5").text(wordArray[rand]); 
    $("#big-bob h5").addClass("animate"); 
    setInterval(typingEffect,10000); 
} 

typingEffect();

來源

2017-10-14 VikashSDNT

發生這種情況的原因是每次添加新的setInterval函數離子被稱爲。請使用clearInterterval或將setInterval更改爲setTimeout。注意區別：https：//developer.mozilla.org/en-US/Add-ons/Code_snippets/Timers – jeff

你正在創建一個新的時間間隔，每次你執行typingEffect()功能...

var wordArray = ["TEXT1","TEXT2","TEXT3"]; 

function typingEffect() { 
    var rand = Math.floor(Math.random()*3); 
    $("#big-bob h5").text(wordArray[rand]).addClass("animate"); 
} 

setInterval(typingEffect,10000); 
typingEffect(); // This last line is only needed if you want to execute the function 
       // when page loads (otherwise, first execution will be after the 
       // first 10 seconds)

要做到這一點在你的方式，你應該使用setTimeout()。 ...

var wordArray = ["TEXT1","TEXT2","TEXT3"]; 

function typingEffect() { 
    var rand = Math.floor(Math.random()*3); 
    $("#big-bob h5").text(wordArray[rand]).addClass("animate"); 
    setTimeout(typingEffect,10000); 
} 

typingEffect();

來源

2017-10-14 08:03:55

嗨A. Lglesias非常感謝。這工作得很好。但我需要更多信息。在這個函數中的時間是10秒，在動畫（css）上它也是10秒，但是兩者不匹配。 – VikashSDNT

是的，定時器可能會因CPU負載等而受到延遲（Web瀏覽器與所有應用程序一樣，輪換CPU時間段，並且根據負載情況，他們必須等待的時間會有所不同）。你應該設置一個大於css動畫的'setTimeout'間隔持續時間，以確保css動畫有足夠的時間在下一個'setInterval'迭代到來之前完成。可能1秒的差異應該足夠了，但請嘗試不同的值以根據您的需求進行調整。 –

嗨A. Lglesias，再次感謝。現在我又遇到了問題。其實我不想隨機的字符串。我想通過數組wordArray一步一步的字符串。請幫幫我。 – VikashSDNT

在setInterval的幾分鐘後文本開始閃爍javascript

回答

相關問題