zoukankan      html  css  js  c++  java
  • setTimeout、setInterval时间设为0会怎样??

    setTimeout

    话不多说,直接上代码:

    console.log('立即执行1--' + new Date().getMilliseconds());
    setTimeout(function(){
    console.log('延时0ms执行--' + new Date().getMilliseconds());
    },0);
    console.log('立即执行2--' + new Date().getMilliseconds());
    

    我们看一下打印结果:
    image.png

    再看下面这段代码:

    console.log('立即执行1--' + new Date().getMilliseconds());
    
    setTimeout(function(){
    console.log('延时0ms执行--' + new Date().getMilliseconds());
    },0);
    
    console.log('立即执行2--' + new Date().getMilliseconds());
    
    setTimeout(function(){
    console.log('延时1ms执行--' + new Date().getMilliseconds());
    },1);
    
    console.log('立即执行3--' + new Date().getMilliseconds());
    
    setTimeout(function(){
    console.log('延时50ms执行--' + new Date().getMilliseconds());
    },50);
    
    console.log('立即执行4--' + new Date().getMilliseconds());
    

    执行结果:
    image.png

    Javascript是单线程的,执行顺序由上而下,而setTimeout是典型的异步方法,其中的操作会被挂起,直到主队列中的代码执行完成后才开始执行。

    setInterval

    console.log('立即执行1--' + new Date().getMilliseconds());
    var count = 0;
    var testIntval = setInterval(function(){
        console.log('定时器--'+ new Date().getMilliseconds());
        count++;
        if(count == 2){
            clearInterval(testIntval);
        }
    },0);
    
    console.log('立即执行2--' + new Date().getMilliseconds());
    

    打印结果有两种,出现第2种的几率更大:
    image.png
    image.png

    setInterval 和setTimeout比较

    console.log('立即执行--' + new Date().getMilliseconds());
    
    setTimeout(function(){
    console.log('延时0ms执行1--' + new Date().getMilliseconds());
    },0);
    
    var count = 0;
    var testIntval = setInterval(function(){
        console.log('定时器1--'+ new Date().getMilliseconds());
        count++;
        if(count == 1){
            clearInterval(testIntval);
        }
    },0);
    
    setTimeout(function(){
    console.log('延时0ms执行2--' + new Date().getMilliseconds());
    },0);
    

    执行结果有两种,第1种几率更大:
    image.png
    image.png

  • 相关阅读:
    在React中使用Redux数据流
    开发中经常遇到的一些css样式问题
    记录一下CSS outline-width 属性
    使用git stash命令保存和恢复进度
    一分钟搭建好webpack通用坏境
    二维码生成(QRCode.js)
    IE6浏览器有哪些常见的bug,缺陷或者与标准不一致的地方,如何解决
    如何进行网站性能优化
    JavaScript深拷贝与浅拷贝的理解
    新问题: 两个样式对同一个元素操作,为什么最新的样式没有起作用?(已解决)
  • 原文地址:https://www.cnblogs.com/SPHmomo/p/12936091.html
Copyright © 2011-2022 走看看