Question

我试图写一个简单的jquery＆＃34; addon＆＃34;我打字就像打字机一样打字。
这是我到目前为止所提出的：

＆＃13;

jQuery.fn.typer=function(speed){
  typed = this;
  theText = typed.text().split('');
  typed.text("");
  $.each(theText, function(index, value){
    setTimeout(function(){
      typed.append(value);
    },speed*index);
  });
  return;
};


$("#p0").typer(50);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id='p0'>This text will appear at the speed: 50</p>

＆＃13;

这种方式完全没问题，直到我试图让它同时输出两个句子。

＆＃13;

jQuery.fn.typer=function(speed){
  typed = this;
  theText = typed.text().split('');
  typed.text("");
  $.each(theText, function(index, value){
    setTimeout(function(){
      typed.append(value);
    },speed*index);
  });
  return;
};


$("#p0").typer(50);
$("#p1").typer(100);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id='p0'>This text will appear at the speed: 50</p><br />
<p id='p1'>This text will appear at the speed: 100</p>

＆＃13;

我得到的结果是：TThihs itesxt wtilel xaptpe arw ait lthle spaeepd：p 5e0ar at speed：100

有关如何阻止这种情况发生的任何线索？
提前致谢。

Answer 1

在不使用var关键字的情况下声明变量会将变量置于全局范围内。见this question for more details。
因此，两个实例共享变量并导致您在上面看到的乱码。

＆＃13;

jQuery.fn.typer=function(speed){
  var typed = this;
  var theText = typed.text().split('');
  typed.text("");
  $.each(theText, function(index, value){
    setTimeout(function(){
      typed.append(value);
    },speed*index);
  });
  return;
};


$("#p0").typer(50);
$("#p1").typer(100);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id='p0'>This text will appear at the speed: 50</p><br />
<p id='p1'>This text will appear at the speed: 100</p>

＆＃13;

防止自定义jquery函数在同时运行时合并连接

1 个答案: