首页 文章

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

提问于
浏览 次
-2

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

3 回答

  • 2

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

    但是，在第一个示例中，您的变量是全局变量，因此每次调用 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>
    回复于
  • 0

    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>
    回复于
  • -1

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

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

    回复于

相关问题