Question

我正在尝试这个javascript代码

var txt = "", txtLen = 0, elem='';
var speed=90;

function write( obj ) {
    txt = obj.str;
    speed = obj.speed;
    elem = obj.elem;
    txtLen = txt.length;
    setTimeout("loop()", 300);
}
var c=0;
function loop() {
if( c <= txtLen ){
    document.getElementById(elem).innerHTML+=txt.charAt(c);
    c++;
    setTimeout("loop()", speed);
} else {
    c=0;
  }
}

但在html中，当我打电话给写函数两次时，它的打印只有最后一个，就像这样 -

<font id="o"></font><br>
<font id="oo"></font>
<script>
write({ 
 elem:'o', 
 speed:90,
 str:'Hello'
});
write({
 elem:'oo',
 speed:90,
 str:'World'
});

</script>

有人可以告诉我，错误在哪里吗？

Answer 1

这应该有效

function loop(obj, c) {
    if( c <= obj.str.length ){
       document.getElementById(obj.elem).innerHTML += obj.str.charAt(c);
       setTimeout(loop, obj.speed, obj,c+1);
    } 
}
function write( obj ) {
    setTimeout( loop,  300, obj, 0);
}

setTimeout函数可以选择接受将传递给回调函数的变量

Answer 2

因为您正在异步执行打印，所以当您打印第一个打印时，第二个已经修改了您的vars。

您所面对的是不纯净的功能。

不纯的功能

所有这些都修改了它的外部   环境，通常称为副作用。

任何使用非局部变量的函数都可能不纯，例如：

function impure（x）{return x + a; }

解决它的想法是将不纯的函数转换为纯函数。这是什么意思？纯函数是一种不会修改其外部环境的函数。

纯粹的功能

所有这些都没有修改它的外部   环境，例如：

function pure（x，a）{return x + a; }

下面是您的示例：

＆＃13;

<font id="o"></font>
<br>
<font id="oo"></font>
<script>
  function write( obj ) {
      setTimeout(() => {
        loop(obj, 0);
      }, 300);
  }

  function loop(obj, c) {
    if( c <= obj.str.length ){
        document.getElementById(obj.elem).innerHTML += obj.str.charAt(c);
        setTimeout(() => {
          loop(obj, c + 1);
        }, obj.speed);
    }
  }
  
  write({ 
   elem:'o', 
   speed:90,
   str:'Hello'
  });
  
  write({
   elem:'oo',
   speed:90,
   str:'World'
  });

</script>

＆＃13;

如您所见，loop函数不再从其外部环境中获取任何内容。当您异步工作时，共享变量不是一个好的选择。

希望它可以帮助你。

为什么打印最后一个元素

2 个答案:

不纯的功能

纯粹的功能