在函数中使用if语句的问题

在函数中使用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>

回答(3)

2 years ago

发生这种情况是因为每次 typeWritersetTimeout (允许循环)中运行时都会调用 typeWriter 函数 . 因此,您将每个循环/函数调用重新初始化(覆盖值) i0 .

但是,在第一个示例中,您的变量是全局变量,因此每次调用 typeWriter 函数时都不会重新初始化它们 . 这允许您的recursive function最终满足其基本情况并终止 . 在示例二中,这不会发生,因为 i 在函数运行时始终为 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>

2 years ago

It's because of var i =0; inside the function.

每次调用该函数时,它都会将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>

2 years ago

您在typeWriter()函数中声明了一个局部变量“i”,它创建了一个本地上下文,并且每次调用typeWriter()函数时,此“i”变量都被初始化为0 . 当变量在外部声明时,它是全局上下文的一部分,但在第二种情况下,变量“i”在本地上下文中 .

编辑:逐行调试两个代码,您将知道哪个版本的变量“i”保持最后一个值,哪个不保持 .