Question

在函数中使用if语句时，我面临一个简单的问题。

此代码正常运行：

<!DOCTYPE html>
<html>
<body>

<h1>Typewriter</h1>

<button onclick="typeWriter()">Click me</button>

<p id="demo"></p>

<script>
var i = 0;
var txt = 'Lorem ipsum dummy text blabla.';
var speed = 50;

function typeWriter() {
  if (i < txt.length) {
    document.getElementById("demo").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}
</script>

</body>
</html>

但是当我在函数内部声明变量时，它将继续重复变量文本的第一个字母。为什么会发生这种情况？

代码如下：

<!DOCTYPE html>
<html>
<body>

<h1>Typewriter</h1>

<button onclick="typeWriter()">Click me</button>

<p id="demo"></p>

<script>


function typeWriter() {

var i = 0;
var txt = 'Lorem ipsum dummy text blabla.';
var speed = 50;
  if (i < txt.length) {
    document.getElementById("demo").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}
</script>

</body>
</html>

Answer 1

您要在typeWriter（）函数中声明一个局部变量“ i”，该变量创建一个本地上下文，并且每次调用typeWriter（）函数时，都会将该“ i”变量初始化为0。当变量在外部声明时，它是全局上下文的一部分，但在第二种情况下，变量“ i”在局部上下文中。

编辑：逐行调试两个代码，您将知道哪个版本的变量“ i”保留最后一个值，哪个版本不保留最后一个值。

Answer 2

之所以发生这种情况，是因为每次typeWriter在typeWriter中运行时都会调用setTimeout函数（这允许您循环）。因此，您在每个循环/函数调用中都将i重新初始化（覆盖0到typeWriter。

但是，在第一个示例中，您的变量是全局变量，因此每次调用i函数时都不会重新初始化变量。这样，您的recursive function最终会满足其基本情况并终止。而在示例二中，这不会发生，因为函数运行时0始终为<!DOCTYPE html> <html> <body> <h1>Typewriter</h1> <button onclick="typeWriter('Lorem ipsum dummy text blabla.', 0)">Click me</button> <p id="demo"></p> <script> var speed = 50; function typeWriter(txt, i) { if (i < txt.length) { document.getElementById("demo").innerHTML += txt.charAt(i); setTimeout(_ => typeWriter(txt, ++i), speed); } } </script> </body> </html>。

相反，如果希望将变量保留在本地，可以考虑使用局部参数：

class Snake{
    constructor(id, trail){
        this.velocityX = 0;
        this.velocityY = -1;
        this.trail = trail;
        this.id = id;
    }
    moveRight(){
        console.log('move');
    }
}

Answer 3

这是因为var i = 0;在函数内部。

每次调用该函数时，它将i的值重置为零，这将导致仅打印要打印在屏幕上的第一个字符。为了避免这种情况，您可以在函数外部定义计数器。

<!DOCTYPE html>
<html>
<body>

<h1>Typewriter</h1>

<button onclick="typeWriter()">Click me</button>

<p id="demo"></p>

<script>

var i = 0;
function typeWriter() {
var txt = 'Lorem ipsum dummy text blabla.';
var speed = 50;
  if (i < txt.length) {
    document.getElementById("demo").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}
</script>

</body>
</html>

在函数中使用if语句时出现问题

3 个答案: