Question

我对我的JS测试代码有疑问。我需要它显示每个1500的下一个字符的间隔，但是由于某种原因，直到浏览器出现错误，我才看不到它们会自动相乘的位置。我在这里共享代码：

<title>Minuevotitulodeprueba</title>
<script type="text/javascript">
    var i=1;
    var LegitTitle = document.title;
    function ChangeTitle(){
        document.title = LegitTitle.substring(0,i);
        i++;
        if(i>LegitTitle.length) 
            i = 0;
        setInterval('ChangeTitle()',1500);  
    }
    ChangeTitle()
</script>

我是一位求饶xdd的新开发人员

Answer 1

您的代码有两个问题

setInterval函数的第一个参数不应是字符串，而应是函数-> setInterval(ChangeTitle,1500);。虽然可以与字符串（表达式）版本一起使用，但是不建议这样做。
除非您知道自己在做什么，否则不应在setInterval中称为自身的函数中使用setInterval

将其放在函数之外...

var i = 1;
var LegitTitle = document.title;
function ChangeTitle(){
  document.title = LegitTitle.substring(0,i);
  i++; 
  if (i > LegitTitle.length) {
    i = 0;
  }
  console.log(document.title)
}

setInterval(ChangeTitle,1500);

<title>Minuevotitulodeprueba</title>

...或使用setTimeout代替setInterval

var i = 1;
var LegitTitle = document.title;
function ChangeTitle(){
  document.title = LegitTitle.substring(0,i);
  i++; 
  if (i > LegitTitle.length) {
    i = 0;
  }
  console.log(document.title)
  
  setTimeout(ChangeTitle, 1500);
}

ChangeTitle()

<title>Minuevotitulodeprueba</title>

Answer 2

您每次调用函数时都要设置一个新的间隔，但是迭代将在一个间隔而不是超时的时间内调用该函数。因此，可以通过在函数调用之外声明迭代来避免此问题。

var i=1;
    var LegitTitle = document.title;
    function ChangeTitle(){
        
        document.title = LegitTitle.substring(0,i);
        
        if(i>LegitTitle.length) {
            i = 0;
        }
        console.log('i = ' + i);
        console.log('Title = ' + document.title);
        i++;
    }
    ChangeTitle();
    setInterval(ChangeTitle,1500);

<title>Minuevotitulodeprueba</title>

Answer 3

您遇到的唯一问题是您使用了setInterval而不是setTimeout ...简单的交换，代码工作正常。

var i = 1;
var LegitTitle = document.title;

function ChangeTitle() {
  document.title = LegitTitle.substring(0, i);
  console.log(document.title)
  i++;
  if (i > LegitTitle.length)
    i = 0;
  setTimeout('ChangeTitle()', 1500);
}
ChangeTitle()

<title>Minuevotitulodeprueba</title>

因为我的动态标题显示不正确？

3 个答案: