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

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，除非你知道自己在做什么

放在函数之外...

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>

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

Because my dynamic title is not displayed correctly?

javascript

title