Javascript 每秒从字符串中移动一个字符

出于学习的目的，我正在尝试将

标记innerHTML每秒移动一个字符。我设法移动了它，但我不能设置移动之间的延迟。它只是瞬间移动

function shiftAChar(str) {
    charToShift = str[str.length - 1];
    return charToShift + "" + str.substring(0, str.length - 1);
    console.log(str);
    setTimeout(shiftAChar, 1000);
}

function shiftString(str) {
    for (i = 0; i <= 40; i++) {
        console.log(str);
        str = shiftAChar(str);
        document.getElementById("divSecundar").getElementsByTagName("p")[0].innerHTML = str;
    }
}




window.onload = function () {
    document.getElementById("runEffect").addEventListener("click", function () {
        str = document.getElementById("divSecundar").getElementsByTagName("p")[0].innerHTML;
        console.log(str);
        shiftString(str);
    });
    document.getElementById("stopEffect").addEventListener("click", function () { run = false; })
}

功能移位器（str）{
charToShift=str[str.length-1]；
返回charToShift+“”+str.substring（0，str.length-1）；
console.log（str）；
setTimeout（移位器，1000）；
}
功能移位字符串（str）{
对于（i=0；i我认为您已经接近了。具体来说，您不希望在循环本身中执行此操作，而是使用
setTimeout
伪递归调用函数（在尝试时）。我认为您发现的问题是，循环和设置超时尝试都在尝试做相同的事情，而循环只是做得更快

为了简单起见，让我们假设将字符从一个元素移动到另一个元素的逻辑封装在函数
moveOneCharacter（）
（这将包括实际的UI更新）中。因为您已经知道如何实现这一点，所以这个答案可以只关注计时问题

从结构上看，整个过程可能如下所示：

function shiftTheNextCharacter() {
    moveOneCharacter();
    if (charactersRemain()) {
        setTimeout(shiftTheNextCharacter, 1000);
    }
}

不需要循环。调用此函数后，它将移动第一个字符。如果还有更多字符（当然，您也必须编写该函数），它会安排自己移动下一个字符

当然，这假设总是至少有一个字符要开始。您可以相应地修改逻辑。但结构的要点是，循环将立即执行操作，而将操作安排在稍后的时间让您可以控制该时间。
我认为您已经接近了。具体来说，您不希望在循环本身是一个循环，但是您应该使用
setTimeout
伪递归调用函数（在您尝试时）。我认为您发现的问题是，循环和
setTimeout
尝试都在尝试做相同的事情，而循环只是做得更快

为了简单起见，让我们假设将字符从一个元素移动到另一个元素的逻辑封装在函数
moveOneCharacter（）
（这将包括实际的UI更新）中。因为您已经知道如何实现这一点，所以这个答案可以只关注计时问题

从结构上看，整个过程可能如下所示：

function shiftTheNextCharacter() {
    moveOneCharacter();
    if (charactersRemain()) {
        setTimeout(shiftTheNextCharacter, 1000);
    }
}

不需要循环。调用此函数后，它将移动第一个字符。如果还有更多字符（当然，您也必须编写该函数），它会安排自己移动下一个字符

当然，这假设总是至少有一个字符要开始。您可以相应地修改逻辑。但结构的要点是，循环将立即执行操作，而将操作安排在稍后时间进行可以控制该时间。
您可以使用
setInterval（shiftString，1000）
要实现这一点，在
shiftAChar
中还有一个return语句，后面跟着更多的代码，返回后的代码将无法到达。如果使用具有语法检查功能的编辑器，或使用类似lint的程序检查代码，它将告诉您在
return
语句后无法到达的代码。您可以使用
setInterval（移位字符串，1000）
要实现这一点，在
shiftAChar
中还有一个return语句，后面跟着更多的代码，返回后的代码将无法到达。如果使用有语法检查功能的编辑器，或者使用类似lint的程序检查代码，它会告诉您在
return
语句之后无法到达的代码。不确定是什么charactersRemain（）应该这样做。我真正想要达到的是你在电视上看到的效果，新闻提要。@CiucaS：它会检查是否还有字符要移动，所以如果没有什么事情要做，函数就不会被安排。我想我不清楚你想要什么效果。我以为你是想把文本从一个元素移动到另一个元素r一次一个字符。我假设一旦文本被完全移动，这个过程就会完成。就像新闻频道上的一样，比如CNN，屏幕上有一个条，不断地向你提供新闻，当没有新闻时，它会重新开始。类似这样的事，但我想对一个简单的
@Ciu这样做caS：所以循环没有结束？在这种情况下，您可以完全删除完成检查，然后像那样伪递归地使用
setTimeout
。
if
条件只是检查它应该何时停止。如果它不应该停止，那么就不需要该条件。我使用循环只是为了测试它是否对f有效好几次了。不管怎样，我已经找到了解决办法。我不确定是什么性格应该这样做。我真正想要达到的是你在电视上看到的效果，新闻提要。@CiucaS：它会检查是否还有字符要移动，所以如果没有什么事情要做，函数就不会被安排。我想我不清楚你想要什么效果。我以为你是想把文本从一个元素移动到另一个元素r一次一个字符。我假设一旦文本被完全移动，这个过程就会完成。就像新闻频道上的一样，比如CNN，屏幕上有一个条，不断地向你提供新闻，当没有新闻时，它会重新开始。类似这样的事，但我想对一个简单的
@Ciu这样做caS：所以循环没有结束？在这种情况下，您可以完全删除完成检查，然后像那样伪递归地使用
setTimeout
。
if
条件只是检查它应该何时停止。如果它不应该停止，那么就不需要该条件。我只是使用了循环
function shiftTheNextCharacter() {
    moveOneCharacter();
    if (charactersRemain()) {
        setTimeout(shiftTheNextCharacter, 1000);
    }
}