setTimeout的一些细节

Posted 2020-09-10

定义和用法

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

语法

setTimeout(code,millisec)

code 和 millisec 都是必填参数, code的写法有多种方式

 

提示

setTimeout() 只执行 code 一次

实例:

setTimeout(‘alert("hello wrold")‘, 1000) //hello wrold

实例:

setTimeout(‘console.log("hello wrold")‘, 1000) //hello wrold

实例:

setTimeout(‘document.querySelector("body").style.backgroundColor="red"‘, 1000); // 1秒过后页面的body标签会设置行间样式

实例:

function f() {
        alert(‘hello wrold‘)
    };
    setTimeout(‘f()‘, 1000)
    // 1秒之后输出 hello wrold

实例:

function f() {
        alert(‘hello wrold‘)
    };
    setTimeout(‘f‘, 1000);
    // 不会输出内容

实例:

function f(str) {
        alert(str)
    };
    setTimeout(‘f("hello wrold")‘, 1000)
    // 通过传递参数的方式1秒之后仍然能输出 hello wrold

实例:

function f(str) {
        alert(str)
    };

    setTimeout(‘f‘, 1000);
    setTimeout(‘f("hello wrold")‘, 2000);

    /*
     如果第一个定时器不传参数,而第二个定时器传递了参数, 实际上第一种写法定时器是不会输出内容的,但是也不影响第二个定时器输出内容     
    */  

    // 定时器的 code 和 millisec 都是必填参数,只要code存在,定时器就不会报错
    var x;
    setTimeout(‘x‘, 1000);
    setTimeout(‘alert("hello wrold")‘, 2000); //输出 hello world 而不会报错

    setTimeout(‘true‘, 1000);
    setTimeout(‘[]‘, 2000);
    setTimeout(‘{}‘, 3000);
    setTimeout(123, 4000);
    setTimeout(‘null‘, 4000);
    setTimeout(‘undefined‘, 5000);
    setTimeout(‘Symbol‘, 6000);
    setTimeout(‘alert("hello wrold")‘, 7000); // 输出 hello wrold

 

实例:

setTimeout(function() {
    alert(‘hello world‘);
}, 1000)

// 输出 hello wrold

实例:

var name = ‘wrold‘;
    var obj = {
        name: "hello",
        f:function(){
            setTimeout(function(){
                console.log(this);
                console.log(this.name)
            },1000)
        },
        f2: function(){
            setTimeout( () => {
            console.info(this);
            console.info(this.name)
            },1000)
        }
   };

 obj.f(); // window, wrold
 obj.f2(); // Object hello

 在使用setTimeout时如果用到了箭头函数请注意this的指向;
 因为setTimeout是window对象,所以它里面的this是指向window,而箭头函数会把this绑定到声明时的上下文，因此还是Object

实例:

// setTimeout() 时间参数设为0的运用
    
var fuc = [1,2,3];
for(var i in fuc){
  setTimeout(function(){console.log(fuc[i])},0);
  console.log(fuc[i]);
};

输入出结果为:

1

2

3

3

3

3

var name = ‘wrold‘;
    var obj = {
        name: "hello",
        f:function(){
            setTimeout(function(){
                console.log(this);
                console.log(this.name)
            },1000)
        },
        f2: function(){
            setTimeout( () => {
            console.info(this);
            console.info(this.name)
            },1000)
        }
   };

 obj.f(); // window, wrold
 obj.f2(); // Object hello

 在使用setTimeout时如果用到了箭头函数请注意this的指向;
 因为setTimeout是window对象,所以它里面的this是指向window,而箭头函数会把this绑定到声明时的上下文，因此还是Object