美文网首页Front-end Related
setTimeout 的一点理解

setTimeout 的一点理解

作者: 虚玩玩TT | 来源:发表于2017-12-21 00:57 被阅读0次

    setTimeout,延时触发。
    用法示例

    setTimeout(`console.log(1)`,1000);
    setTimeout(()=>{console.log(1)},1000);
    

    首先,理解 setTimeout 是一个函数方法,接收两个参数,会异步加载传入的函数。

    function cslog(){
      setTimeout(`console.log(5)`,3000)
    };
    console.log(1);
    cslog();
    setTimeout(`console.log(2)`,2000);
    setTimeout(`console.log(3)`,1000);
    console.log(4);
    
    //返回的结果依次为1,4,3,2,5
    //由于异步,所以先执行1,4,再执行3,2,5,
    //注意,这里的 5 最后执行
    

    ok,这里谈谈最后打印 5 。
    我的理解是,setTimeout 所谓异步,会将所有传入的函数放在同一个作用域下,然后根据延时的时间依次执行。

    还有一点,setTimeout 会返回一个数字,作为异步执行的一个标识,可以通过clearTimeout 这个值,让其不执行,并且这个值是全局的,可以在同页面的任何地方操作,这点用的多的应该是 setInterval 及 clearInterval。

    let timer;
    function a(){
      timer = setTimeout(()=>{console.log(1)},10000); //10s 后打印1
    };
    
    function b(){
      a();
      console.log(2)
    };
    
    clearTimeout(timer) ;
    

    以上,我们知道可以取消10s后的打印,感觉是将 setTimeout 赋值给 timer,timer 是全局的,但是,但是,但是,这里的 timer 是 number,也就是说,只需要知道 number 的值,我们就可以直接 clearTimeout(number) 达到同样的效果。

    所以,可以这样理解 setTimeout,每次进行 setTimeout 会生成一个状态并给这个状态一个编号,并且这个编号是连续的,当主路上的代码执行完后,才开始执行所有的异步代码,所有的异步代码,通过设定的延时时间分先后同步执行。

    function cslog(){
      setTimeout(`console.log(5)`,1000)
    };
    console.log(1);
    cslog();
    setTimeout(`console.log(2)`,1000);
    setTimeout(`console.log(3)`,1000);
    console.log(4);
    
    //打印结果1,4,5,2,3
    //延时都为1s,异步后,代码又得按同步规则进行执行
    

    所以,这个会怎样输出呢?

    function a(){
      setTimeout(()=>{
        setTimeout(()=>{
          console.log(1)
        },1000)
      console.log(2)
      },2000)
    };
    
    setTimeout(()=>{console.log(3)},3000);
    a();
    
    //**************************************************************************************************2 3 1
    

    相关文章

      网友评论

        本文标题:setTimeout 的一点理解

        本文链接:https://www.haomeiwen.com/subject/nmqowxtx.html