JS 循环赋值问题

Question

for(i=0; i< 1000; i++){
    document.title = i;
}

为什么不会是一个从0到999的数字转换动画效果?

Answer 1

你这个问的挺有意思的

实际上，你写的没有问题的，但是执行时间过短，所以就看不到了

1000次也就20ms左右

console.time('test');
for(i=0; i< 1000; i++){
    document.title = i;
}
console.timeEnd('test');
// test: 21.629ms

如果100W次的话，你还是可以看到的

console.time('test');
for(i=0; i< 1000000; i++){
    document.title = i;
}
console.timeEnd('test');
// test: 19399.047ms

如果想固定时间改变的话，比如间隔1s

1、setInterval

var num = 0;
setInterval(function() {
    num++;
    document.title=num;
    if (num > 1000)
        clearInterval(i);
}, 1000);

2、setTimeout

var num = 0;
setTimeout(function () {
    num++;
    document.title=num;
    if (num < 1000) {
        setTimeout(arguments.callee, 1000);
    }
}, 1000);

Answer 2

documen.title属于dom元素
DOM元素的渲染实在JS任务执行完毕后才有机会执行。
还是一个单线程的问题-DOM元素的渲染和JS的执行在同一个线程中

Answer 3

function countDown(n){
  var i=0;
  var eId=setInterval(function(){
      if(i<n){
        document.title=i++;
      }else{
        clearInterval(eId);
      }
  },1000);
}
countDown(10);

Answer 4

这样执行太快了。你可以这样写

function timer_1(n){
    if(n<1000){
        document.title = n;
        setTimeout(function(){timer_1(n+1)},1000);
    }
}

timer_1(1);

Answer 5

你那样循环耗时几乎可以忽略不计了。这样就行。

var i=0;
var timer = setInterval(function(){
    if(i<1000) document.title = i++;
    else clearInterval(timer);
}, 1000);

Answer 6

简单写一下

for (var i = 0; i < 1; i++) {
    setInterval(function(){
    i++;
    document.title = i;
    }, 1000);
}