我成功地将实现我目标的代码整理在一起。但是,我想从更高级的JS初学者那里获得一些建议,以更好地实现自己的目标。
首先,我想介绍一下我的问题。我的网站上有一段文字,其中一部分旨在经常更改。为此,我要遍历短语循环。为了连续运行此循环,我首先调用该循环,然后使用setInterval再次调用该循环,定时将在初始循环结束时开始。这是我得到的代码,即使它不是质量代码也可以使用:
function loop(){
for (let i = 0; i < header_phrases.length; i++){
(function (i) {
setTimeout(function(){
header_txt.textContent = header_phrases[i];
}, 3000 * i);
})(i);
};
}
loop();
setInterval(loop, 21000);
是否有更好的方法可以同时针对此代码进行性能和质量检查?我需要使用异步吗?如果是这样,我可以看到任何资料以了解更多信息?谢谢!
答案 0 :(得分:1)
您可以使用递归来实现相同的逻辑。
function recursify(phrases, index = 0) {
header_txt.textContent = phrases[index];
setTimeout(function () {
recursify(phrases, index < phrases.length - 1 ? index + 1 : 0);
}, 300)
}
recursify(header_phrases);
“ recursify”函数将在300毫秒后调用自身,但是每次调用此函数时,索引值都会不同。
答案 1 :(得分:0)
如果我正确理解了您的要求,则希望从值数组中填充元素。
一种简单的方法是:
doLoop();
function doLoop() {
var phraseNo=0;
setTimeout(next,21000);
next();
function next() {
header_txt.textContent = header_phrases[phraseNo++];
if(phraseNo>=header_phrases.length) phraseNo=0;
}
}
这只是将next()
函数放在队列中并等待。
在函数之前,对next()
的调用只是将其启动而无需等待超时。
答案 2 :(得分:0)
这是假设header_txt
和header_phrases
不是全局变量。使用全局变量不是一个好主意。
var repeatIn = 3000;
phraseUpdater();
function phraseUpdater() {
var updateCount = 0,
phrasesCount = header_phrases.length;
setHeader();
setTimeout(setHeader, repeatIn);
function setHeader() {
header_txt.textContent = header_phrases[updateCount++ % phrasesCount] || '';
}
}