Question

出于学习目的，我试图每秒将<p>标签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; })
}

HTML：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Nu are</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script type="text/javascript" src="evenimente.js"></script>


</head>
<body>
    <h2>Header Two</h2>
    <div>
        <div id="divSecundar">
            <p>Aceasta este primul paragraf</p>
            <p>Aceasta este al treilea</p>
        </div>
        <p>Aceasta este cel de-al doilea paragraf</p>
    </div>
    <input type="text" value="asdf" id="textBoxInput" />
    <input type="button" value="Run effect" id="runEffect" />
    <input type="button" value="Stop effect" id="stopEffect" />
    <input type="button" value="Animatie" id="animatie" />
    <br />
    <br />
    <input type="button" value="Click" id="btnClick" />
    <input type="button" value="Click" id="btnClickRemove" />

</body>
</html>

我不想使用jQuery。它只能使用纯JavaScript代码来实现吗？

我的解决方案：

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

function shiftString(str, counter) {
    if (counter <= 5) {
        str = shiftAChar(str);
        document.getElementById("divSecundar").getElementsByTagName("p")[0].innerHTML = str;
        setTimeout(function () {
            shiftString(str, ++counter);
        }, 1000);
    }
}




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

Answer 1

我认为你很接近。具体来说，您不希望在循环本身中执行此操作，而是使用setTimeout伪随机地调用该函数（因为您正在尝试）。我认为你发现的问题是循环和setTimeout尝试都试图做同样的事情，而循环只是做得更快。

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

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

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

不需要循环。一旦调用此shiftTheNextCharacter()函数，它将移动第一个字符。如果还有更多的角色（当然你也必须写这个功能），它会安排自己移动下一个角色。

这假设当然至少有一个角色可以开始。您可以相应地修改逻辑。但结构的要点是循环会立即执行操作，而调度操作将在以后发生，这使您可以控制该时间。

每秒从字符串中移出一个字符

1 个答案: